CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2961617
user2961617

Reputation: 85

How can i create concave border?

i want to create a shape like exactly this but not on left and right border. i want to act on top and bottom border. is there a way to do it without border-radius i tried to do it by changing the corner in border-radius command like this:

   border-radius: 60px 0 0 60px / 300px 0 0  300px;
   display: block;
   content: '';
   position: relative;

i do not understand well that what does he do on border-radius. he divide two input!!! can we use *,/,+ and - operator in css i haven't seen like this before and when i searched in google i could not find anything!! but it doesn't work for me.

Upvotes: 1

Views: 157

Answers (3)

Travis
Travis

Reputation: 369

Here's one way to do it. The fiddle you provided is using pseudo elements (:before and :after) to achieve the effect, so I adjusted their height/width and border-radius values:

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 0 0 50% 50%;
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

#test:after{
    background: white;
    height: 15px;
    width: 100px;
    border-radius: 50% 50% 0 0 ;
    display: inline-block;
    content: '';
    bottom: 0;
    position: absolute;
}

fiddle: http://jsfiddle.net/KcP5k/24/

Upvotes: 1

DaniP
DaniP

Reputation: 38262

What you need is reposition the after and before pseudo-elements like this:

#test:before{
   border-radius: 0 0 100px 100px / 0 0 60px 60px;
   display: block;
   position:absolute;
   top:0;
}
#test:after{
  border-radius:100px  100px 0 0/ 60px 60px 0 0;
  display: block;
  position: absolute;
  bottom:0;
}

Check this Demo Fiddle

Here you can know the use of the / on the border-radius syntax.

Upvotes: 1

dev7
dev7

Reputation: 6369

Easy way will be to rotate it 90 degrees and change the height & width:

-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

Upvotes: 1

Related Questions