使用css折叠角实现

我可以仅使用SSC在块中实现此类角度吗

我不想拍照片

---

谁知道呢，请告诉我。

这不是100%准确，而是一个开始，您应该能够从这里调整，以匹配您正在寻找的形状：

HTML

---

尝试css伪元素和css边框半径的组合：

.盒子{ 位置：相对位置； 填充：10px； 保证金：30像素自动； 背景：darkorange； 宽度：300px； } .内容{ 位置：相对位置； z指数：2； } .上下， .左右{ 位置：绝对位置； z指数：1； 排名：0； 右：0； 底部：0； 左：0； } .上下：之前， .上下：之后{ z指数：1； 内容：； 显示：块； 位置：绝对位置； 背景：darkorange； 右：0； 左：0； 高度：12px； 边框：4倍实心暗绿色； } .上下：之前{ 顶部：-12px； 边界底部：0； 边框左上半径：13px； 边框右上角半径：13px； } .上下：之后{ 底部：-12px； 边界顶部：0； 边框左下半径：13px； 边框右下半径：13px； } .左-右：之前， .左-右：之后{ 内容：； 显示：块； 位置：绝对位置； 背景：darkorange； 排名：0； 底部：0； 宽度：12px； 边框：4倍实心暗绿色； } .左-右：之前{ 左-12px； 边框左上半径：13px； 边框左下半径：13px； 右边界：0； } .左-右：之后{ 右：-12px； 边框右上角半径：13px； 边框右下半径：13px； 左边框：0； } Lorem ipsum dolor sit amet，奉献精英。假设动物身上的黑色素瘤复发，那么它就应该是暂时性的，而不是永久性的！维罗！

---

你已经试过什么了？你可以用CSS来做这件事，但是这个过程太复杂了，我觉得不值得花时间。快告诉我吧。回答得很好。谢谢，看起来很完美。@Dzvene很高兴你喜欢它。如果这是你问题的答案，请接受我的回答。谢谢。@Dzvene只是一个简短的提醒，请接受我的回答=

<div class="box">
    <div class="box_bg">   
        <div class="corner one"></div>
        <div class="corner two"></div>
    </div>
</div>

.box {
   -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
          margin-top:-50px;
}

.box_bg {
    background: red;
    height: 300px;
    width: 300px;
    margin: 100px;
   -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    -moz-border-radius: 20%;
     -webkit-border-radius: 20%;
      border-radius: 20%;
}

.box_bg:before {
    content: " ";
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 20px;
 }

.corner {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 0 solid transparent;
      border-right: 70px solid transparent;
      border-top: 100px solid red;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      float: left;
      margin-left: 15px;
}

.one {
   -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
}

.two {
   margin-left: -70px;
   -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
}