[英]Trapezium span with CSS
有什么方法可以畫出一個帶有文字的梯形物嗎? 無論角落是否圓潤都沒關系,事實上,如果是的話,我會更喜歡它。 我知道如何制作一個帶有border-radius的橢圓/圓形 ,但是我被困在了梯形上。 請幫忙!
我使用pseudo-elements
和skew
css屬性做了純css,支持border-radius
: demo在dabblet.com上
http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png
html: <span>Trapezium</span>
css:
span {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 200px;
height: 50px;
}
span:before,
span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
}
span:before {
transform: skew(25deg);
left: 25px;
}
span:after {
transform: skew(-25deg);
right: 25px;
left: auto;
}
pseudo-elements
demo 使用此css代碼
span {display:block;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
我曾經做過一次,認為它是這樣的:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.