制作CSS角落风格

Question

我很困惑，如何使用css设计显示选项：

如何制作像这张照片的角落风格......请帮助我。感谢

Answer 1

https://jsfiddle.net/pksdhofc/1/

<div class='arrow'></div>

.arrow{
  width: 30px;
  height: 80px;
  background-color: #999;
  -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
}

clip-path使用多个X和Y坐标来创建svg。您可以根据自己的喜好进行操作，但这样可以满足您的需求。

Answer 2

试试这个：

.inner{
  height: 300px;
  width: 200px;
  background-color: red;
  border-radius: 10px;
}

.outer{
  padding: 10px;
  background-color: green;
  display: inline-block;
  border-radius: 20px;
  position: relative;
  margin-left: 100px;
}

.arrow{
 position: absolute;
 top: 30px;
 left: -50px;
 border: 25px solid transparent;
 border-right: 25px solid green;
}

<div class="outer">
  <div class="inner"></div>
  <div class='arrow'>
</div>