我正在尝试实现一个锥形的标记。也就是说，一边是倾斜的边缘（向内倾斜），其余三面是直的边缘。
我不确定是否可以单独使用CSS和HTML。我试过用谷歌搜索这个问题，但找不到任何解决办法。
我试过了：
-webkit-border-bottom-right-radius : 50px 650px;
其中650px是整个高度，如果我的分区，但这给了我一个圆角的右下位置，这是我不想要的。希望你们知道这个问题的答案，或者至少建议一个替代方案。
最佳答案
这个can be achieved和transparent border一起！
CSS
#test1 {
border-top: 100px solid red;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
width: 300px;
}
#test2 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#test3 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 100px;
width: 100px;
content: 'ds';
z-index: -1; /* make it the background */
}
#test3 .content {
position: relative;
top: -100px;
margin: 5px;
float: left; /* wrap the text */
clear: left; /* for demo */
font-size: 1em;
background-color: cyan;
}
HTML
<body>
<div id="test1">
</div>
<br/>
<div id="test2">
</div>
<br/>
<div id="test3">
<div class="content">
Watch for the<br>
new lines. <br>
Do not overlap.
</div>
</div>
</body>