平尖角或斜角

Question

有没有办法用CSS和HTML创建一个尖锐的平角？

像这样的东西:

  ____
 /    \
 |    |
 \____/

Answer 1

看这里.在那里你找到你所需要的一切:

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

编辑如果链接丢失:

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 2

这是我的解决方案,使用Chris Coyier的CSS形状.

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

通过JavaScript(实际上是jQuery)为您希望以这种方式塑造的每个容器插入4个额外的div.这些div完全位于它的父角落中,并且它们的设计相应如Sven Bieder发布的链接中所描述的那样