Html 制作CSS角样式

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

如何使角落的风格像这张照片。。。请帮帮我。谢谢

.阿罗{
宽度：30px；
高度：80px；
背景色：#999；
-webkit剪辑路径：多边形（0 50%，100%0，100%100%，0 50%）；
剪辑路径：多边形（0 50%，100%0，100%100%，0 50%）；
}

剪辑路径使用多个X和Y坐标来创建svg。你可以随心所欲地进行微型操作，但这会满足你的需要。

试试这个：

.inner{
高度：300px；
宽度：200px；
背景色：红色；
边界半径：10px；
}
.外部{
填充：10px；
背景颜色：绿色；
显示：内联块；
边界半径：20px；
位置：相对位置；
左边距：100px；
}
.阿罗{
位置：绝对位置；
顶部：30px；
左：-50px；
边框：25px实心透明；
右边框：25px纯绿；
}

你的意思是说边界样式吗？我想OP是在谈论边界样式。请包括你迄今为止尝试过的样式。无论如何，这都不是一个非常明确的问题。请详细说明你想要什么，以及到目前为止你已经尝试了什么。谢谢Maharkus。。。这就是我的意思^ ^使用

剪辑路径

将严重限制您的浏览器支持，您最好使用大家都使用的旧边界黑客。为什么这么复杂。我们可以随时使用边框来创建箭头，就像我想到的第一件事一样。如果我们都努力，我们可以忘记IE 9和10:）@尼卡曼尼什：其实并不复杂。你的好一些，是吗

<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%);
}