CSS で形状を作成しようとしています: 丸みを帯びた六角形 (これも細長い)。色々と考えてみましたが(本体は箱、上下に丸みを帯びた三角形を2つ)、今のところいい案が思い浮かびません。CSS でこの形状を作成するアイデアはありますか? (私が来た最も近い、伸びなし: http://cdpn.io/fhpiH )
5408 次
3 に答える
1
私の解決策は、ほぼそこにあります。:)
上下に2つのボックスを使用し、45度回転させます。
HTML
<div class="container">
<div class="box"></div>
<div class="middle"></div>
<div class="box"></div>
</div>
CSS
.container {
position:relative;
width:500px;
}
.middle {
border-left: 10px solid orange;
border-right: 10px solid orange;
height: 228px;
left: 137px;
position: absolute;
top: 132px;
width: 266px;
background:#fff;
z-index:20;
}
.box {
width:200px;
height:200px;
background:#fff;
border:10px solid orange;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(45deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(0deg);
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
}
@koningdavid - 彼のソリューションは少し優れています:before
。:after
于 2013-06-24T15:15:13.187 に答える
0
My Variant of CSS3 Hexagon with borders and box-shadow and border-radius on dream-notes and demo at cssdesk
于 2013-08-28T14:14:01.550 に答える