【发布时间】：2015-07-05 01:09:39
【问题描述】：
我想使用 CSS 创建下面给定的框。
我搜索了很多并阅读了非常好的文章，例如https://css-tricks.com/examples/ShapesOfCSS/，但我陷入了一个问题 - 紫色边框前沿。我试过八角形，但这不适用于这种情况。
我几乎做到了。这是我的sn-p：
.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-->当前作品截图
【问题讨论】：
-
到目前为止请提供您自己的代码
-
带边框、阴影等等？？？背景图片（立法的东西...）还是带有文字？无论如何……这几乎是不可能的。只需使用 .png 图像作为元素背景 :D 我的意思是，花点时间和朋友或家人一起玩吧；)
-
感谢回复 tambo 我几乎实现了它再次重新编辑
-
@Abhi：创建一个 sn-p 非常简单。创建/编辑帖子时，单击工具栏中的
<>图标以打开编辑器（如 JSFiddle 或 CodePen）。在编辑器窗口中，将您的 HTML、CSS 和 JS 代码放入相应的框中，然后单击“插入帖子”。就是这样:) 注意：点击“整理”按钮也可以正确格式化代码。 -
另外，请通过单击答案附近的空心刻度线将其中一个答案标记为已接受。这通常是将问题标记为“已解决”的方式。
标签： html css css-shapes