我正在尝试实现渐变<div>
标记。也就是说,一侧倾斜的边缘(向内倾斜)和所有其他三边的直边。
我不确定是否可以单独使用CSS和HTML。我试过谷歌搜索这个问题,但找不到任何解决方案。
我试过了:
-webkit-border-bottom-right-radius : 50px 650px;
如果我的div,650px是整个高度。但这给了我一个圆角的右下角位置,这是我不想要的。希望你们知道这个问题的答案,或者至少建议一个替代方案。
答案 0 :(得分:6)
此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>
答案 1 :(得分:2)
看起来CSS区域可能http://www.adobe.com/devnet/html5/articles/css3-regions.html(向下滚动到标题为“Wrap shape”的部分)。您可以将形状定义为多边形,然后进行设置!不幸的是,异形区域支持目前是有限的,但根据您的使用情况,它可能会有效。