html - 平らな鋭い角または面取りされた角

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 によって投稿されたリンクで説明されているように、それに応じてスタイルが設定されます

Answer 3

これは、 CSSの三角形の手法を使用して、絶対位置の要素:beforeと:after要素を使用して作成できます。

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

}