CSS items with border radius and triangle side

Question

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

li items

Yes, but it's not supported in older versions of IE. Is that an issue? — zzzzBov
– zzzzBov, Commented Sep 19, 2012 at 17:16
Probably easier to do with two elements per (for lack of a better term) thing. One for the bigger left hand part with the rounded edges and the other for the triangle. — j08691
– j08691, Commented Sep 19, 2012 at 17:18
it's not necessary IE support :) And it's ok if another element, but how can I create triangle without specified height? — Oleg Pasko
– Oleg Pasko, Commented Sep 19, 2012 at 17:23

methodofaction · Accepted Answer · 2012-09-19 19:36:35Z

4

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

answered Sep 19, 2012 at 19:36

methodofaction

72.7k22 gold badges159 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:02:05Z

2

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Sep 19, 2012 at 17:18

Kristóf Dombi

3,9973 gold badges20 silver badges14 bronze badges

1 Comment

Oleg Pasko Over a year ago

That's greate solutions, but I have one problem: how can I create triangle without specified height? One li item can be in one line, another in two...

Nikola K. · Accepted Answer · 2012-09-19 18:29:21Z

1

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.

edited Sep 19, 2012 at 18:29

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Sep 19, 2012 at 17:26

Alex

35.5k5 gold badges81 silver badges94 bronze badges

4 Comments

Roddy of the Frozen Peas Over a year ago

Doesn't work for variable element height, like the OP indicated he needed. See JSFiddle.

Oleg Pasko Over a year ago

Thanks, but yep, - problems with two lines :)

Alex Over a year ago

you can either use JavaScript or you can truncate the text with CSS - jsfiddle.net/hJfgw/7 - though it all depends on your particular requirements.

Oleg Pasko Over a year ago

Heh, thanks for this variant, but truncate isn't acceptable for me :(

Collectives™ on Stack Overflow

CSS items with border radius and triangle side

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related