<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* æ­£æ–¹å½¢ */
.square{
    width: 200px;
    height: 100px;
    background: red;
}
/* é•¿æ–¹å½¢ */
.rectangle{
    width: 200px;
    height: 50px;
    background: red;
}
/* åœ† */
.circular{
    width:100px;
    height:100px;
    background:red;
    border-radius:50%; /* æ°´å¹³ã€åž‚ç›´åŠå¾„ä¸ºå®½é«˜çš„50% */
}
/* æ¤­åœ† */
.ellipse{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px / 50px;  /* è¡¨ç¤ºä»¥æ°´å¹³åŠå¾„100px åž‚ç›´åŠå¾„50pxçš„æ¤­åœ†åˆ‡å‰² */
}
/* ä¸‰è§’å½¢ä¸Š */
.triangle-top{
    width: 0;
    height: 0;
    /* border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red; */
    border: 50px solid;
    border-color: transparent transparent red transparent;
}
/* ä¸‰è§’å½¢ä¸‹ */
.triangle-bottom{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
/* ä¸‰è§’ç®­å¤´å·¦ */
.arrow_left{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent red transparent transparent;
    position: relative;
  }
  .arrow_left::after{
    content: '';
    position: absolute;
    right: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent white transparent transparent;
  }
/* ä¸‰è§’ç®­å¤´å³ */
.arrow_right{
    width: 0;
    height: 0;
    border: 50px solid;
    border-color:  transparent transparent transparent red ;
    position: relative;
}
.arrow_right::after{
    content: '';
    position: absolute;
    left: -55px;
    bottom: -50px;
    border: 50px solid;
    border-color: transparent transparent transparent  white ;
}
/* ä¸‰è§’å½¢å·¦ä¸Š:å…¶ä»–æ–¹å‘åŒç†ï¼Œä¿®æ”¹border-xx å³å¯*/
.triangle{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
/* å³ä¸Šæ–œè§’ */
.bevel-angle {
    position: relative;;
}
.bevel-angle::after{
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: calc(100% - 50px);
    height: 50px;
    background-color: #44c6a4;
}
.bevel-angle::before{
    content: "";
    position: absolute;
    left: calc(100% - 50px);
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid #44c6a4;
    border-right: 50px solid transparent;
}</pre></body></html>