我想使用 CSS 创建下面给出的框。
我进行了很多搜索并阅读了非常好的文章，例如https://css-tricks.com/examples/ShapesOfCSS/ https://css-tricks.com/examples/ShapesOfCSS/但我陷入了一个问题——紫色边框切割边缘。我尝试了八边形，但这不适用于这种情况。
我几乎做到了这一点。这是我的片段：
.box-outer {
width: 300px;
height: 120px;
padding: 15px 30px;
background: rgba(237, 236, 236, 0.72);
border: 3px solid rgb(89, 67, 128);
position: relative;
border-right: 20px solid rgb(89, 67, 128);
}
.box-outer:before {
content: "";
position: absolute;
top: -3px;
left: -4px;
border-bottom: 29px solid rgb(255, 252, 252);
border-right: 29px solid #594380;
border-top: 28px solid #FFF;
height: 66%;
width: 0;
}
.box-outer:after {
content: "";
position: absolute;
top: -3px;
right: -13%;
border-top: 29px solid white;
border-left: 29px solid #594380;
border-bottom: 28px solid #FFF;
width: 0;
height: 66%;
}
.box-outer .right-text {
position: absolute;
right: -22%;
color: white;
font-size: 20px;
top: 40%;
z-index: 10;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
<div class="box-outer">
<span class="right-text">
LEGISLATIVE
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<!--box outer-->
目前工作截图
请查看这个解决方案，我终于做到了
我添加了 box-inner div 来实现这一点。
看看小提琴
`http://jsfiddle.net/maverickabhi/qfthejb2/`
.box-outer {
width: 300px;
height: 120px;
padding: 15px 30px;
background: rgba(237, 236, 236, 0.72);
border: 3px solid rgb(89, 67, 128);
position: relative;
border-right: 20px solid rgb(89, 67, 128);
}
.box-outer:before {
content: "";
position: absolute;
top: -3px;
left: -4px;
border-bottom: 29px solid rgb(255, 252, 252);
border-right: 29px solid #594380;
border-top: 28px solid #FFF;
height: 66%;
width: 0;
}
.box-outer:after {
content: "";
position: absolute;
top: -3px;
right: -13%;
border-top: 29px solid white;
border-left: 29px solid #594380;
border-bottom: 28px solid #FFF;
width: 0;
height: 66%;
}
.box-outer .right-text {
position: absolute;
right: -22%;
color: white;
font-size: 20px;
top: 40%;
z-index: 10;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.box-inner {
content: "";
position: absolute;
top: -2px;
left: -1px;
border-bottom: 30px solid transparent;
border-right: 29px solid #F1F0F0;
border-top: 29px solid transparent;
height: 63%;
width: 0;
}
<div class="box-outer">
<span class="right-text">
LEGISLATIVE
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="box-inner"></div>
</div>
<!--box outer-->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
