css - 使用css折 Angular 实现

Question

https://www.dropbox.com/s/4u6xidqdqaxjjid/1.png?dl=0

我能否仅使用 SSC 在 block 中实现此类 Angular ？

不想拍照

谁知道，请告诉我。

Answer 1

尝试结合使用 css 伪元素 (w3c spec) 和 css 边框半径 (w3c spec):

jsfiddle Demo

.box {
  position: relative;
  padding: 10px;
  margin: 30px auto;
  background: darkorange;
  width: 300px;
}
.content {
  position: relative;
  z-index: 2;
}
.top-bottom,
.left-right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.top-bottom:before,
.top-bottom:after {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  background: darkorange;
  right: 0;
  left: 0;
  height: 12px;
  border: 4px solid darkgreen;
}
.top-bottom:before {
  top: -12px;
  border-bottom: 0;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}
.top-bottom:after {
  bottom: -12px;
  border-top: 0;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}
.left-right:before,
.left-right:after {
  content: "";
  display: block;
  position: absolute;
  background: darkorange;
  top: 0;
  bottom: 0;
  width: 12px;
  border: 4px solid darkgreen;
}
.left-right:before {
  left: -12px;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  border-right: 0;
}
.left-right:after {
  right: -12px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  border-left: 0;
}

<div class="box">
  <div class="top-bottom"></div>
  <div class="left-right"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iusto magnam natus amet in assumenda iure recusandae aspernatur animi blanditiis molestiae sunt nisi temporibus reprehenderit nesciunt doloribus fugit aliquam! Vero!
  </div>
</div>