テキストを含む台形のスパンを描く方法はありますか? 角は丸くても構いません。border-radius を使用して楕円/円を作成する方法は知っていますが、台形にこだわっています。助けてください!
質問する
2526 次
3 に答える
4
私は純粋なcssを使用しpseudo-elements
、skew
cssプロパティをサポートして実行しましたborder-radius
: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;
}
UPD: なしのデモpseudo-elements
于 2012-06-04T13:02:24.057 に答える
0
このCSSコードを使用してください
span {display:block;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
于 2012-06-04T12:48:28.260 に答える
0
私は一度それをしました、それは次のようなものだったと思います:
于 2012-06-04T12:56:25.527 に答える