平尖角或斜角(Flat sharp corner or beveled corners)

有什么办法来创建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:

这里是我的解决方案，利用克里斯Coyier CSS的形状。

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

4周额外的div是通过JavaScript（当然，实际的jQuery）为每个容器，你想形这样的插入。这些div在它的父角落绝对定位，并在发布的斯文Bieder链接描述了他们相应的风格

Answer 3:

您可以撰写此使用绝对定位:before和:after使用元素的CSS三角形技术。

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

Answer 5:

 .rotate { margin: 100px; background-color: olivedrab; width: 100px; height: 100px; transform: rotate(45deg); }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rotate"></div> </body> </html>

文章来源: Flat sharp corner or beveled corners