html - 我怎样才能制作八 Angular 形盒子？

Question

我想使用 CSS 创建下面给定的框。

我进行了很多搜索并阅读了非常好的文章，例如 https://css-tricks.com/examples/ShapesOfCSS/但我陷入了一个问题 - 紫色边框切割边缘。我试过八 Angular 形，但这对这种情况不起作用。

我几乎做到了。这是我的片段:

.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-->

当前工作截图

Answer 1

请检查这个解决方案，我终于成功了

我添加了 box-inner div 来实现这一点。

检查 fiddle

`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-->