html – 使用CSS的锥形div_html-js-css

概述我正在努力实现锥形< div>标签.也就是说,一侧的倾斜边缘(向内倾斜)和所有其他三侧的直边缘. 我不确定是否可以单独使用CSS和HTML.我试过谷歌搜索这个问题,但找不到任何解决方案. 我试过了： -webkit-border-bottom-right-radius : 50px 650px; 如果我的div,650px是整个高度.但这给了我一个圆角的右下角位置,这是我不想要的.希望你们知道这个我正在努力实现锥形< div>标签.也就是说,一侧的倾斜边缘(向内倾斜)和所有其他三侧的直边缘.

我不确定是否可以单独使用CSS和HTML.我试过谷歌搜索这个问题,但找不到任何解决方案.

我试过了：

-webkit-border-bottom-right-radius : 50px 650px;

如果我的div,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 >        Watch for the<br>        new lines. <br>        Do not overlap.      </div>    </div>  </body>

总结

以上是内存溢出为你收集整理的html – 使用CSS的锥形div全部内容，希望文章能够帮你解决html – 使用CSS的锥形div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1081560.html