Düz köşe veya eğimli köşeler

Question

CSS ve HTML ile keskin bir düz köşe oluşturmak için herhangi bir yol var mı? Böyle

şey:

____ 
/ \ 
| | 
\____/ 

Answer 1

benim çözümdür Chris Coyier CSS şekilleri kullanarak.

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

4 ekstra div'ler bu şekilde şekillendirilmiş istediğiniz senin kapların her biri için JavaScript (iyi, aslında jQuery) üzerinden yerleştirilir. Bu div'ler, yani ana köşelerinde kesinlikle konumlandırılmış ve Sven Bieder

Answer 2

Sen CSS triangles tekniği kullanarak kesinlikle bir konuma :before ve :after unsurları kullanarak bu oluşturabilirsiniz.

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

css: Burada

.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

bak. Orada size gereken tüm bulmak: durumunda

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

Düzenleme bağlantı kaybetti gider:

CSS İşte

#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>