我正在努力实现锥形<div>标签.也就是说,一侧的倾斜边缘(向内倾斜)和所有其他三侧的直边缘.
我不确定是否可以单独使用CSS和HTML.我试过谷歌搜索这个问题,但找不到任何解决方案.
我试过了:
-webkit-border-bottom-right-radius : 50px 650px;
如果我的div,650px是整个高度.但这给了我一个圆角的右下角位置,这是我不想要的.希望你们知道这个问题的答案,或者至少建议一个替代方案.
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>
| 归档时间： |
|
| 查看次数： |
2600 次 |
| 最近记录： |