CODEWITHSUNDEEP
csscss-shapes
Oleg Pasko
Oleg Pasko

Reputation: 2911

CSS items with border radius and triangle side

Is it possible in css (without images) make items with border radius and triangle side?

li items

Upvotes: 5

Views: 6919

Answers (3)

methodofaction
methodofaction

Reputation: 72415

You can use an SVG image that will render sharply at any size and will adapt to the element's size, it would 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've inlined the svg so you can understand how it works, but if you load it from an external file it should work fine. Here's the rendering for reference:

enter image description here

Upvotes: 4

Kristóf Dombi
Kristóf Dombi

Reputation: 3967

have a look at this: http://css-tricks.com/snippets/css/css-triangle/ or this: http://jonrohan.me/guide/css/creating-triangles-in-css/

for the dynamic height, there is a question and answer here: CSS triangle with dynamic height

Upvotes: 2

Alex
Alex

Reputation: 35407

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 varying heights you're going to need to either write some JavaScript code to dynamically change the border size or truncate the text using CSS. Though, it depends on your particular requirements.

Upvotes: 1

Related Questions