CODEWITHSUNDEEP
css
user1554264
user1554264

Reputation: 1224

Creating a custom shape with CSS

I'm trying to create a customised shape with CSS but I can't quite create what I want to achieve. The shape will be representing the selected item on the main navigation which is shown here:

As you can see I have styled the element <a class="selected"> with the CSS property border-radius: 40px 40px 40px 40px; that displays a shape that has a similar appearance to a pill.

However what i am trying to achieve is a shape that has straight top and bottom edges but has rounded left and right sides as shown in the image below: Are there any CSS properties I can apply to achieve this?

enter image description here

Upvotes: 2

Views: 2898

Answers (2)

Christoph
Christoph

Reputation: 51191

Take a look at the following css:

div{
    border-radius: 10px / 100%;
}

This hardly known slash notation enables you to use elliptical border radii as you can see in the images of the MDN border-radius Doc.

With the slash notation you can define the vertical and horizontal border-radius like this:

border-radius: [up to 4 horizontal values] / [up to four vertical values];

This means you can define ellipses with different radii for each corner separately (following the normal rules of defining multiple values):

    /*           horizontal values | vertical values   */
    /*              ↓ top-left     |  ↓ top-left       */
    border-radius: 5px 6px 7px 8px / 10px 11px 12px 13px;
    /*             bottom-right ↑  |    bottom-right ↑ */

If you distort the ellipse strongly enough, you can achieve the effect needed for your case.

div{
    background:#bada55;
    color:white;
    font-size:30px;
    font-family:arial, sans-serif;
    padding:10px 20px;
    display:inline-block;
    margin:10px; 
    border-radius: 10px / 90%;
    text-shadow:1px 1px 1px #792;
    box-shadow:inset 1px 1px 1px rgba(70,90,10,.3);
}
<div>sponsorship</div>

JSFiddle

Upvotes: 13

Schleis
Schleis

Reputation: 43700

You can do this in css3. This link contains various shapes that you can use http://css-tricks.com/examples/ShapesOfCSS/. I think that you would want to use something similar to "TV Screen"

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

Upvotes: 1

Related Questions