Geek asks and answers

CSS elements with border radius and triangular side

Is it possible in css (without images) to create elements with a border radius and a triangle?

li items

+5
source share
3 answers

You can use an SVG image that will be sharply displayed at any size and will adapt to the size of the element, it will look like this:

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 15px/130% Arial, sans-serif;
  padding: 10px 20px;
  clear: both;
  margin: 10px;
  border-radius: 5px 0 0 5px;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('triangle.svg') 0 0 no-repeat;
}

http://jsfiddle.net/Ch7aA/

This jsfiddle will only work in Webkit because I introduced svg so you can understand how it works, but if you download it from an external file, it should work fine. Here's the rendering for reference:

enter image description here

+4
source

HTML:

<div><span>fubar</span></div>

CSS

span{
    display:block;
    width:100px;
    float:left;
    background-color:green;
    text-align:center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding:5px 0;
}
div:after {
    content: "";
    display:block;
    float:left;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;   
    border-left: 10px solid green;
}

jsFiddle Demo

Update:

To be able to handle different heights, you will need to either write JavaScript code to dynamically resize the frame, or crop text using CSS. Although, it depends on your specific requirements.

+1
source

More articles:


All Articles