1

次のテスト コードを使用して、ひし形の形状を作成しようとしています。スパンは標準的な長方形で、2辺がひし形に見えます

**********
 *      * 
  ******

ただし、前後のセレクターは何もレンダリングしていないようです。私のやり方が間違っているのか、それとも絶対に配置したほうがいいのかはわかりません。

何か案は？

<style>

span {
width:50px;
height:20px;
color:white;
background-color:red;
padding:10px;
}

span:before {
background: url('left_side.png') left center no-repeat; 
height:43px; width:22px; 
}

span:after {
background: url('right_side.png') right center no-repeat; 
height:43px; width:22px;
}

</style>

<html>
<body>

<span>
Some text goes here
</span>

</body>
</html>
4

3 に答える 3

3 
    #demo { border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            height: 0; width: 100px; }

なぜ人々はcss3を作ったのか画像なしでそれを行う

デモ: http://jsfiddle.net/sahilpopli/dRyLg/

于 2013-03-21T12:20:43.817 に答える
0

空のcontentままにしても、プロパティは必須です：

span:before {
    content : "";
    display:inline-block;
    background: url('left_side.png') left center no-repeat; 
    height:43px; width:22px; 
}

span:after {
    content : "";
    display:inline-block;
    background: url('right_side.png') right center no-repeat; 
    height:43px; width:22px;
}

編集：display:inline-block;実際にスパンで機能するディメンションプロパティに追加されました。この例を参照してくださいhttp://jsfiddle.net/3nvhb/

于 2013-03-21T12:18:34.370 に答える
0

これを試して：

span:before  {
   content: url('left_side.png'); 
   height:43px; width:22px; 
}

span:after {
   content: url('right_side.png'); 
   height:43px; width:22px;
}
于 2013-03-21T12:09:42.480 に答える