Elementy CSS z promieniem obramowania i bokiem trójkąta

Question

Czy jest możliwe w css (bez obrazów) tworzyć elementy o promieniu obramowania i stronie trójkąta?

Answer 1

Można użyć obrazu SVG, że będzie ostro renderowania w dowolnym rozmiarze i dostosuje się do wielkości elementu, to będzie wyglądać tak ...

.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/

Ten jsfiddle będzie tylko pracuj w Webkit, ponieważ umieściłem na nim napis svg, abyś mógł zrozumieć, jak działa, ale jeśli załadujesz go z zewnętrznego pliku, powinien działać dobrze. Oto renderowania dla odniesienia:

Answer 2

rzucić okiem na to: http://css-tricks.com/snippets/css/css-triangle/ czy to: http://jonrohan.me/guide/css/creating-triangles-in-css/

na wysokości dynamicznych, jest pytanie i odpowiedź tutaj: CSS triangle with dynamic height

Answer 3

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

---

Aktualizacja:

Aby móc obsługiwać różne wysokości masz zamiar trzeba albo napisać kod JavaScript, żeby dynamicznie zmień rozmiar ramki lub skróć tekst za pomocą CSS. Jednak zależy to od Twoich szczególnych wymagań.