CSSいくつかの特別なグラフィック

CSSいくつかの特別なグラフィック

CSSは三角形を描きます

効果は、境界属性三角形要素を制御することによって達成することができる、
第一ボーダーセット4を、ある50px solid [color]結果の色の外観の色値の異なる組

<div id="wrapper">
    <div id="triangle"></div>
</div>

:host{
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    background: gray;
}

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#triangle {
    width: 0;
    height: 0;
    border-right: 50px solid greenyellow;
    border-left: 50px solid hotpink;
    border-top: 50px solid turquoise;
    border-bottom: 50px solid rebeccapurple;
}

そして、border-topその結果を見て削除

#triangle {
    width: 0;
    height: 0;
    border-right: 50px solid greenyellow;
    border-left: 50px solid hotpink;
    /* border-top: 50px solid turquoise; */
    border-bottom: 50px solid rebeccapurple;
}

最後border-rightとborder-left設定しtransparent、border-bottomそのまま

#triangle {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    /* border-top: 50px solid turquoise; */
    border-bottom: 50px solid rebeccapurple;
}

見つけることは困難で、border-bottom値が大きいほど、より高い高さ、border-left及びborder-right頂点値の位置を制御することができます。

CSSクレセント

<div class="moon"></div>

.moon {
    width: 80px;
    height: 80px;
    /* background: red; */
    border-radius: 50%;
    box-shadow: 15px 15px 0 0 yellow;
    transform: translate(-15px,-15px); /* 不影响布局 */
}

CSSのツールチップヒント

<div class="tool-tip">
        余额不足提示
</div>

.tool-tip {
    background: #000;
    color: red;
    padding: .4rem .6rem;
    border-radius: .3rem;
    position: relative;
}

.tool-tip::before {
    content: "";
    width: 15px;
    height: 15px;
    background: #000;
    display: block;
    z-index: -1;
    position: absolute;
    top: -7.5px;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%) rotate(45deg); /* translateX(-50%)是为了让三角箭头居中 */
}