6

非常に単純なアイデアですが、これを行う方法がわかりません。div（可能であれば）1つとしてスタイリングできるようにしたいと思います。

どうすれば八角形を作成できますdivか？

4

3 に答える 3

15

このリンクで使用されている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;
}

これは、長方形の形状が与えられたdiv要素自体から構成されています。:beforeおよび疑似クラスを使用して :after、コンテンツが追加され、八角形を完成させる2つの台形が作成されます。巧妙なことに、これはCSSのよりファンキーなビットを使用することにより、実際のタグ数を1つに保ちます。

このテクニックの起源はここにあります。

これが簡単なデモです。青い部分は:beforeCSSで、緑の部分は:afterCSSです。さらに良いことに、これは透明な背景を可能にするデモです！（ありがとう@GGG）。

于 2012-02-17T01:46:41.033 に答える
3

正方形を作って45度回転させてから角を切り取ってみてはいかがでしょうか。

.octagon {
    height: 10em;
    position: relative;
    overflow: hidden;
    width: 10em;
}

.octagon:after {
    background: red;
    content: " ";
    height: 100%;
    position: absolute;
    width: 100%;


  -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
       -o-transform: rotate(45deg); 
          transform: rotate(45deg); 

}

jsFiddle

于 2013-10-09T10:24:47.183 に答える
1

ポリゴン要素を使用して、インラインsvgで八角形のdivを達成することもできます。 次に例を示します。

svg{width:30%;}
<svg viewbox="0 0 10 10">
  <polygon points="3 0, 7 0, 10 3, 10 7, 7 10, 3 10, 0 7, 0 3" />
</svg>

于 2016-04-13T15:11:40.903 に答える