我想创建一个自定义形状,如下图所示:
我能怎么做 ?
我的CSS:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px; }
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg); }
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }
我的HTML文件:
<div id="chevron">
</div>
但是我的结果不是我想要的:
border-radius
在父div上以创建两个圆角:before
和:after
轻微减少top: 20px
,使他们不见顶的div顶部这是下面的小提琴:
#chevron {
width: 350px;
height: 100px;
background: #337AB7;
border-radius: 10px 10px 0 0;
position: relative;
}
#chevron:before {
content: '';
position: absolute;
top: 20px;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 20px;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
<div id="chevron"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句