Płaskie ostre narożniki lub ścięte narożniki

Question

Czy istnieje sposób na stworzenie ostrego, płaskiego rogu z CSS i HTML?

coś takiego:

____ 
/ \ 
| | 
\____/ 

Answer 1

Oto moje rozwiązanie, używając kształtów CSS z Chrisem Coyier.

http://jsfiddle.net/dDejan/XSs9L/

4 dodatkowe div są wstawiane za pośrednictwem JavaScript (dobrze, faktycznie jQuery) dla każdego z pojemników, które mają być ukształtowane w ten sposób. Te div są umieszczone całkowicie w rogach jest dominująca, a są one odpowiednio urządzone w sposób opisany w linku wysłana przez Sven Bieder

Answer 2

można komponować to za pomocą absolutnie położenie :before i :after elementów z wykorzystaniem techniki CSS triangles.

<div class="box"></div> 

css:

.box { 
    background-color:#2020ff; 
    height:50px; 
    width:50px; 
    position:relative 
} 

.box:after { 
    content:" "; 
    width: 0; 
    height: 0; 
    border-top: 10px solid #ffffff; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid #ffffff; 
    position:absolute; 
    top:-9px; 
    right:0px; 

} 

Answer 3

Spójrz tutaj. Tam znajdziesz wszystko, czego potrzebujesz:

http://css-tricks.com/examples/ShapesOfCSS/

Edit W przypadku, gdy związek idzie utracone:

CSS

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

Answer 4

box { 
 
    background-color: transparent; 
 
    position: fixed; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
svg { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
polygon { 
 
    visibility: visible; 
 
    background: black; 
 
    stroke: white; 
 
}

<box> 
 
    <svg> 
 
    <polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" /> 
 
    </svg> 
 
</box>