次のように、要素の右隅にタブがあるボーダートップを指定します。
これはAdobeBusinessCatalystテンプレート内で繰り返される要素になるため、画像を使用せずに、純粋なCSSまたは少なくともCSSとJavaScriptにする必要があります。これを行う方法はありますか？
これは単なる装飾要素であるため、クロスブラウザである必要はありません。
質問する
182 次
1 に答える
4
これを見てください：
HTML：
<body>
<div class="element">
</div>
</body>
CSS：
body { background: #555 }
.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; }
.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }
：after疑似要素を利用します（これは本当に便利です！）
詳細については、こちらをご覧ください。
残念ながら、これはIE7または6では機能しません。ただし、Webサイトの機能の中核ではないため、そのままで問題ないと思います。
于 2012-11-27T16:36:44.293 に答える