CSSで八角形の表現をする
CSS Shapesの話とかじゃないのであしからず。
CSS
仕組みはけっこう単純。
擬似要素に角の役割をしてもらう。
.octagon {
position: relative;
}
.octagon:before, .octagon:after {
display: block;
content: "";
position: absolute;
left: 0;
right: 0;
border: 20px solid transparent;
}
.octagon:before {
bottom: 100%;
border-bottom-color: inherit;
}
.octagon:after {
top: 100%;
border-top-color: inherit;
}
.octagon-color {
background-color: #DDAAAA;
border-color: #DDAAAA;
}
ポイントと注意点は、
-
:before
と:after
の擬似要素をposition
で配置する - 擬似要素の
border
で台形をつくる -
position
でボックスの外側に配置しているので、実際に配置されるときには、前後の要素との余白の取り方などに注意 -
box-shadow
とかで影をつけるのは辛い。
Codepen
Author And Source
この問題について(CSSで八角形の表現をする), 我々は、より多くの情報をここで見つけました https://qiita.com/hiloki@github/items/22bac2f2c06936cc0ab3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .