CSS some special graphics

CSS some special graphics

CSS draw a triangle

The effect may be achieved by controlling the border attribute triangular element;
first border set 4, is 50px solid [color]a different set of color values in the color look at the results

<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;
}

Then border-topremove look at the results

#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;
}

Finally border-rightand border-leftset transparent, border-bottomunchanged

#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;
}

Difficult to find, border-bottomthe larger the value, the higher the height, border-leftand border-rightthe position of the vertex values can be controlled.

CSS Crescent

<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 tool tip tips

<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%)是为了让三角箭头居中 */
}