border 属性を使用して小さなシンボルを作成する_html/css_WEB-ITnose

過去 2 日間勉強していたときに、ウェブサイト上で小さなシンボルを見つけ、それが挿入された画像だと思いましたが、検索しても画像のアドレスが見つかりませんでした。最後にクラスメイトに聞いたところ、border属性を使って作られていることが分かりました。

シンボルは右に示すとおりです:

CSS コードは次のとおりです:

.fuhao{    position:absolute;    top:12px;    left:12px;    width:0px;    height:0px;    overflow:hidden;    border-width:6px 0px 6px 6px;    border-color:transparent #A92222;    border-style:dashed none dashed solid;}

ここでは空の div、fuhao を使用し、その位置を定義した後、その高さと幅を 0 にしますが、境界線は幅があります。したがって、この div 内には何もなく、境界線だけが存在します。

論理的には次のようになります:

次に、次のステートメントにより、上下の境界線が透明になり、右の境界線が 0px になり、シンボルが取得されます。

実はよく分かりませんが、見たままに枠線を使ってシンボルを作るのはとても面白いと思います。