效果图：
    效果图.png
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>CSS绘制各种特殊图形</title>
    8.   <style type="text/css">
    9.     * { margin: 0; padding: 0; }
    10.     :root {
    11.       --primaryText: #333;
    12.       --primaryColor: #1890ff;
    13.       --successColor: #52c41a;
    14.       --warningColor: #faad14;
    15.       --errorColor: #f5222d;
    16.     }
    18.     html {
    19.       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    20.         'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    21.         'Segoe UI Emoji', 'Segoe UI Symbol';;
    22.     }
    24.     ul { list-style: none; }
    26.     .clearfix::after {
    27.       content: '';
    28.       display: table;
    29.       clear: both;
    30.     }
    32.     .container {
    33.       display: flex;
    34.       flex-wrap: wrap;
    35.       width: 1080px;
    36.       margin: 100px auto;
    37.       padding: 10px;
    38.       box-shadow: 0 0 8px var(--primaryText);
    39.     }
    41.     .section {
    42.       display: flex;
    43.       flex-direction: column;
    44.       align-items: center;
    45.       justify-content: center;
    46.       width: 180px;
    47.       height: 180px;
    48.       margin: 10px;
    49.       border: 1px solid var(--primaryText);
    50.       box-sizing: border-box;
    51.     }
    53.     .section .title {
    54.       height: 32px;
    55.       font-size: 18px;
    56.       font-weight: 700;
    57.       line-height: 32px;
    58.       text-align: center;
    59.       color: var(--primaryText);
    60.     }
    62.     .wrapper {
    63.       flex: 1;
    64.       display: flex;
    65.       justify-content: center;
    66.       align-items: center;
    67.     }
    69.     /* 三角形 */
    70.     .triangle {
    71.       width: 0;
    72.       height: 0;
    73.       border-top: 20px solid var(--primaryColor);
    74.       border-left: 20px solid transparent;
    75.       border-right: 20px solid transparent;
    76.     }
    78.     /* 弯尾箭头 */
    79.     .curved-arrow {
    80.       position: relative;
    81.       width: 0;
    82.       height: 0;
    83.       border-top: 20px solid transparent;
    84.       border-left: 20px solid var(--successColor);
    85.       transform: rotate(45deg);
    86.     }
    87.     .curved-arrow::after {
    88.       content: '';
    89.       position: absolute;
    90.       left: -10px;
    91.       top: -25px;
    92.       width: 30px;
    93.       height: 12px;
    94.       border-top: 6px solid var(--successColor);
    95.       border-radius: 0 30px 0 0;
    96.       transform: rotate(-45deg);
    97.     }
    99.     /* 梯形 */
    100.     .trapezoid {
    101.       position: relative;
    102.       width: 60px;
    103.       height: 40px;
    104.       background-color: var(--warningColor);
    105.     }
    106.     .trapezoid::before {
    107.       content: '';
    108.       position: absolute;
    109.       left: -10px;
    110.       border-left: 10px solid transparent;
    111.       border-bottom: 40px solid var(--warningColor);
    112.     }
    113.     .trapezoid::after {
    114.       content: '';
    115.       position: absolute;
    116.       right: -10px;
    117.       border-right: 10px solid transparent;
    118.       border-bottom: 40px solid var(--warningColor);
    119.     }
    121.     /* 平行四边形 */
    122.     .parallelogram {
    123.       width: 60px;
    124.       height: 40px;
    125.       background-color: var(--errorColor);
    126.       transform: skewX(25deg);
    127.     }
    129.     /* 六角星 */
    130.     .hexagram {
    131.       position: relative;
    132.       width: 0;
    133.       height: 0;
    134.       border-top: 60px solid var(--errorColor);
    135.       border-left: 30px solid transparent;
    136.       border-right: 30px solid transparent;
    137.     }
    138.     .hexagram::after {
    139.       content: '';
    140.       position: absolute;
    141.       left: -30px;
    142.       top: -80px;
    143.       width: 0;
    144.       height: 0;
    145.       border-bottom: 60px solid var(--errorColor);
    146.       border-left: 30px solid transparent;
    147.       border-right: 30px solid transparent;
    148.     }
    150.     /* 五角星 */
    151.     .pertagram {
    152.       position: relative;
    153.       width: 0;
    154.       height: 0;
    155.       border-top: 45px solid var(--errorColor);
    156.       border-left: 62px solid transparent;
    157.       border-right: 62px solid transparent;
    158.     }
    159.     .pertagram::before {
    160.       content: '';
    161.       position: absolute;
    162.       left: -20px;
    163.       top: -85px;
    164.       border-top: 62px solid transparent;
    165.       border-bottom: 62px solid transparent;
    166.       border-left: 45px solid var(--errorColor);
    167.       transform: rotate(18deg)
    168.     }
    169.     .pertagram::after {
    170.       content: '';
    171.       position: absolute;
    172.       right: -20px;
    173.       top: -85px;
    174.       border-top: 62px solid transparent;
    175.       border-bottom: 62px solid transparent;
    176.       border-right: 45px solid var(--errorColor);
    177.       transform: rotate(-18deg)
    178.     }
    180.     /* 五边形 */
    181.     .pentagon {
    182.       position: relative;
    183.       width: 54px;
    184.       border-top: 50px solid var(--primaryColor);
    185.       border-right: 18px solid transparent;
    186.       border-left: 18px solid transparent;
    187.     }
    188.     .pentagon::after {
    189.       content: '';
    190.       position: absolute;
    191.       left: -18px;
    192.       top: -85px;
    193.       width: 0;
    194.       height: 0;
    195.       border-right: 45px solid transparent;
    196.       border-left: 45px solid transparent;
    197.       border-bottom: 35px solid var(--primaryColor);
    198.     }
    200.     /* 六边形 */
    201.     .hexagon {
    202.       position: relative;
    203.       width: 30px;
    204.       height: 52px; /* Math.cos(30deg) * 30 * 2 */
    205.       background-color: var(--warningColor);
    206.     }
    207.     .hexagon::before {
    208.       content: '';
    209.       display: block;
    210.       position: absolute;
    211.       left: 0;
    212.       top: 0;
    213.       width: 100%;
    214.       height: 100%;
    215.       background-color: var(--warningColor);
    216.       transform-origin: center center;
    217.       transform: rotate(60deg)
    218.     }
    219.     .hexagon::after {
    220.       content: '';
    221.       display: block;
    222.       position: absolute;
    223.       left: 0;
    224.       top: 0;
    225.       width: 100%;
    226.       height: 100%;
    227.       background-color: var(--warningColor);
    228.       transform-origin: center center;
    229.       transform: rotate(-60deg)
    230.     }
    232.     /* 八边形 */
    233.     .octagon {
    234.       position: relative;
    235.       width: 100px;
    236.       height: 100px;
    237.       background-color: var(--successColor);
    238.     }
    239.     .octagon::before {
    240.       content: '';
    241.       position: absolute;
    242.       top: 0;
    243.       left: 0;
    244.       width: 42px;
    245.       height: 0;
    246.       border-bottom: 29px solid var(--successColor);
    247.       border-left: 29px solid #fff;
    248.       border-right: 29px solid #fff;
    249.     }
    250.     .octagon::after {
    251.       content: '';
    252.       position: absolute;
    253.       bottom: 0;
    254.       left: 0;
    255.       width: 42px;
    256.       height: 0;
    257.       border-top: 29px solid var(--successColor);
    258.       border-left: 29px solid #fff;
    259.       border-right: 29px solid #fff;
    260.     }
    262.     /* 心形 */
    263.     .heart {
    264.       position: relative;
    265.       width: 100px;
    266.       height: 80px;
    267.     }
    268.     .heart::before,
    269.     .heart::after {
    270.       content: '';
    271.       position: absolute;
    272.       width: 50px;
    273.       height: 80px;
    274.       border-radius: 50px 50px 0 0;
    275.       background-color: var(--errorColor);
    276.     }
    277.     .heart::before {
    278.       left: 0;
    279.       top: 0;
    280.       transform-origin: bottom right;
    281.       transform: rotate(45deg);
    282.     }
    283.     .heart::after {
    284.       right: 0;
    285.       top: 0;
    286.       transform-origin: bottom left;
    287.       transform: rotate(-45deg);
    288.     }
    290.     /* 无限符号 */
    291.     .infinity {
    292.       position: relative;
    293.       width: 100px;
    294.       height: 50px;
    295.     }
    296.     .infinity::before,
    297.     .infinity::after {
    298.       content: '';
    299.       position: absolute;
    300.       width: 50px;
    301.       height: 50px;
    302.       border: 15px solid var(--warningColor);
    303.     }
    304.     .infinity::before {
    305.       left: -36%;
    306.       top: 0;
    307.       border-radius: 50% 50% 0 50%;
    308.       transform: rotate(-45deg);
    309.     }
    310.     .infinity::after {
    311.       right: -36%;
    312.       top: 0;
    313.       border-radius: 50% 50% 50% 0;
    314.       transform: rotate(45deg);
    315.     }
    317.     /* 菱形 */
    318.     .diamond {
    319.       width: 50px;
    320.       height: 50px;
    321.       background-color: var(--primaryColor);
    322.       transform-origin: center center;
    323.       transform: rotate(45deg);
    324.     }
    326.     /* 钻石 */
    327.     .cut-diamond {
    328.       position: relative;
    329.       width: 20px;
    330.       border-bottom: 15px solid var(--errorColor);
    331.       border-left: 15px solid transparent;
    332.       border-right: 15px solid transparent;
    333.     }
    334.     .cut-diamond::before {
    335.       content: '';
    336.       position: absolute;
    337.       left: -15px;
    338.       top: 15px;
    339.       width: 0;
    340.       height: 0;
    341.       border-top: 30px solid var(--errorColor);
    342.       border-left: 25px solid transparent;
    343.       border-right: 25px solid transparent;
    344.     }
    346.     /* 鸡蛋 */
    347.     .egg {
    348.       width: 40px;
    349.       height: 60px;
    350.       border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    351.       background-color: var(--warningColor);
    352.     }
    354.     /* 吃豆人 */
    355.     .pac-man {
    356.       width: 0px;
    357.       height: 0px;
    358.       border-right: 30px solid transparent;
    359.       border-top: 30px solid var(--primaryColor);
    360.       border-left: 30px solid var(--primaryColor);
    361.       border-bottom: 30px solid var(--primaryColor);
    362.       border-top-left-radius: 50%;
    363.       border-top-right-radius: 50%;
    364.       border-bottom-left-radius: 50%;
    365.       border-bottom-right-radius: 50%;
    366.     }
    368.     /* popover */
    369.     .popover {
    370.       position: relative;
    371.       width: 100px;
    372.       height: 40px;
    373.       border-radius: 3px;
    374.       background-color: var(--successColor);
    375.     }
    376.     .popover::after {
    377.       content: '';
    378.       position: absolute;
    379.       left: 50%;
    380.       bottom: -6px;
    381.       margin-left: -6px;
    382.       border-top: 6px solid var(--successColor);
    383.       border-left: 6px solid transparent;
    384.       border-right: 6px solid transparent;
    385.     }
    387.     /* 12边形 */
    388.     .burst-12 {
    389.       position: relative;
    390.       width: 60px;
    391.       height: 60px;
    392.       background-color: var(--errorColor);
    393.     }
    394.     .burst-12::before,
    395.     .burst-12::after {
    396.       content: '';
    397.       position: absolute;
    398.       left: 0;
    399.       top: 0;
    400.       width: 100%;
    401.       height: 100%;
    402.       background-color: var(--errorColor);
    403.       transform-origin: center center;
    404.     }
    405.     .burst-12::before {
    406.       transform: rotate(30deg);
    407.     }
    408.     .burst-12::after {
    409.       transform: rotate(60deg);
    410.     }
    412.     /* 太极图 */
    413.     .tai-ji {
    414.       position: relative;
    415.       width: 96px;
    416.       height: 48px;
    417.       background-color: #fff;
    418.       border-style: solid;
    419.       border-width: 2px 2px 50px 2px;
    420.       border-color: var(--primaryText);
    421.       border-radius: 50%;
    422.     }
    423.     .tai-ji::before {
    424.       content: "";
    425.       position: absolute;
    426.       top: 50%;
    427.       left: 0;
    428.       width: 12px;
    429.       height: 12px;
    430.       background-color: #fff;
    431.       border-radius: 50%;
    432.       border: 18px solid var(--primaryText);
    433.     }
    434.     .tai-ji::after {
    435.       content: "";
    436.       position: absolute;
    437.       top: 50%;
    438.       left: 50%;
    439.       width: 12px;
    440.       height: 12px;
    441.       border: 18px solid #fff;
    442.       border-radius: 50%;
    443.       background-color: var(--primaryText);
    444.     }
    446.     /* 徽章丝带 */
    447.     .badge-ribbon {
    448.       position: relative;
    449.       width: 60px;
    450.       height: 60px;
    451.       border-radius: 50%;
    452.       background-color: var(--errorColor);
    453.     }
    454.     .badge-ribbon::before {
    455.       content: '';
    456.       position: absolute;
    457.       left: 28px;
    458.       bottom: -9px;
    459.       margin-left: -20px;
    460.       border-top: 20px solid var(--errorColor);
    461.       border-left: 10px solid transparent;
    462.       border-right: 10px solid transparent;
    463.       transform: rotate(140deg);
    464.     }
    465.     .badge-ribbon::after {
    466.       content: '';
    467.       position: absolute;
    468.       right: 28px;
    469.       bottom: -9px;
    470.       margin-right: -20px;
    471.       border-top: 20px solid var(--errorColor);
    472.       border-left: 10px solid transparent;
    473.       border-right: 10px solid transparent;
    474.       transform: rotate(-140deg);
    475.     }
    477.     /* 放大镜 */
    478.     .magnifying-glass {
    479.       position: relative;
    480.       width: 30px;
    481.       height: 30px;
    482.       border: 4px solid var(--primaryText);
    483.       border-radius: 50%;
    484.       transform: rotate(-45deg);
    485.     }
    486.     .magnifying-glass::before {
    487.       content: '';
    488.       position: absolute;
    489.       left: 50%;
    490.       bottom: -11px;
    491.       width: 4px;
    492.       height: 8px;
    493.       margin-left: -2px;
    494.       background-color: var(--primaryText);
    495.     }
    497.     /* 圆锥 */
    498.     .cone {
    499.       width: 0;
    500.       height: 0;
    501.       border-top: 40px solid var(--warningColor);
    502.       border-left: 28px solid transparent;
    503.       border-right: 28px solid transparent;
    504.       border-radius: 50%;
    505.     }
    507.     /* 月亮 */
    508.     .moon {
    509.       width: 60px;
    510.       height: 60px;
    511.       border-radius: 50%;
    512.       box-shadow: 10px 10px 0 0 var(--primaryColor);
    513.     }
    515.     /* 标签 */
    516.     .tag {
    517.       position: relative;
    518.       width: 60px;
    519.       height: 30px;
    520.       border-top-left-radius: 3px;
    521.       border-bottom-left-radius: 3px;
    522.       background-color: var(--successColor);
    523.     }
    524.     .tag::before {
    525.       content: '';
    526.       position: absolute;
    527.       right: -20px;
    528.       top: 0;
    529.       border-left: 20px solid var(--successColor);
    530.       border-top: 15px solid transparent;
    531.       border-bottom: 15px solid transparent;
    532.     }
    533.     .tag::after {
    534.       content: '';
    535.       position: absolute;
    536.       right: -8px;
    537.       top: 50%;
    538.       width: 6px;
    539.       height: 6px;
    540.       margin-top: -3px;
    541.       border-radius: 50%;
    542.       background-color: #fff;
    543.     }
    545.     /* 导航 */
    546.     .nav .item {
    547.       position: relative;
    548.       float: left;
    549.       width: 20px;
    550.       height: 14px;
    551.       line-height: 14px;
    552.       font-size: 12px;
    553.       text-align: center;
    554.       color: #fff;
    555.       background-color: var(--primaryColor);
    556.     }
    557.     .nav .item:first-child {
    558.       margin-left: 0;
    559.     }
    560.     .nav .item:last-child {
    561.       margin-right: 0;
    562.     }
    563.     .nav .item:not(:first-child)::before {
    564.       content: '';
    565.       position: absolute;
    566.       left: -10px;
    567.       top: 0;
    568.       border-left: 10px solid transparent;
    569.       border-top: 7px solid var(--primaryColor);
    570.       border-bottom: 7px solid var(--primaryColor);
    571.     }
    572.     .nav .item::after {
    573.       content: '';
    574.       position: absolute;
    575.       right: -10px;
    576.       top: 0;
    577.       border-left: 10px solid var(--primaryColor);
    578.       border-top: 7px solid transparent;
    579.       border-bottom: 7px solid transparent;
    580.     }
    581.     .nav .item:not(:first-child) {
    582.       margin-left: 15px;
    583.     }
    585.     /* 优惠券 */
    586.     .coupon {
    587.       display: flex;
    588.       width: 150px;
    589.       height: 80px;
    590.       background-color: var(--warningColor);
    591.     }
    592.     .coupon .coupon-main {
    593.       flex: 1;
    594.       display: flex;
    595.       align-items: center;
    596.       padding-left: 20px;
    597.       position: relative;
    598.       overflow: hidden;
    599.     }
    600.     .coupon .coupon-main em {
    601.       position: relative;
    602.       font-style: normal;
    603.       color: var(--errorColor);
    604.       font-size: 36px;
    605.       font-weight: 700;
    606.     }
    607.     .coupon .coupon-main em::before {
    608.       content: attr(data-symbol);
    609.       position: absolute;
    610.       left: -10px;
    611.       top: 0;
    612.       font-size: 12px;
    613.       color: var(--primaryColor);
    614.     }
    615.     .coupon .coupon-main em::after {
    616.       content: attr(data-desc);
    617.       position: absolute;
    618.       left: 100%;
    619.       bottom: 0;
    620.       font-size: 12px;
    621.       white-space: nowrap;
    622.       color: var(--primaryColor);
    623.     }
    624.     .coupon .coupon-main::before {
    625.       content: '';
    626.       position: absolute;
    627.       left: -5px;
    628.       top: -5px;
    629.       height: calc(100% + 10px);
    630.       border-left: 10px dotted #fff;
    631.     }
    632.     .coupon .coupon-vice {
    633.       position: relative;
    634.       width: 40px;
    635.       text-align: center;
    636.       line-height: 40px;
    637.       font-size: 14px;
    638.       color: #fff;
    639.       background-color: var(--primaryColor);
    640.       writing-mode: vertical-lr;
    641.       overflow: hidden;
    642.     }
    643.     .coupon .coupon-vice::before {
    644.       content: '';
    645.       position: absolute;
    646.       left: -3px;
    647.       top: 0;
    648.       height: 100%;
    649.       border-right: 6px dotted var(--warningColor);
    650.     }
    651.   </style>
    652. </head>
    653. <body>
    654.   <div class="container">
    655.     <section class="section">
    656.       <h2 class="title">三角形</h2>
    657.       <div class="wrapper">
    658.         <div class="triangle"></div>
    659.       </div>
    660.     </section>
    661.     <section class="section">
    662.       <h2 class="title">弯尾箭头</h2>
    663.       <div class="wrapper">
    664.         <div class="curved-arrow"></div>
    665.       </div>
    666.     </section>
    667.     <section class="section">
    668.       <h2 class="title">梯形</h2>
    669.       <div class="wrapper">
    670.         <div class="trapezoid"></div>
    671.       </div>
    672.     </section>
    673.     <section class="section">
    674.       <h2 class="title">平行四边形</h2>
    675.       <div class="wrapper">
    676.         <div class="parallelogram"></div>
    677.       </div>
    678.     </section>
    679.     <section class="section">
    680.       <h2 class="title">六角星</h2>
    681.       <div class="wrapper">
    682.         <div class="hexagram"></div>
    683.       </div>
    684.     </section>
    685.     <section class="section">
    686.       <h2 class="title">五角星</h2>
    687.       <div class="wrapper">
    688.         <div class="pertagram"></div>
    689.       </div>
    690.     </section>
    691.     <section class="section">
    692.       <h2 class="title">五边形</h2>
    693.       <div class="wrapper">
    694.         <div class="pentagon"></div>
    695.       </div>
    696.     </section>
    697.     <section class="section">
    698.       <h2 class="title">六边形</h2>
    699.       <div class="wrapper">
    700.         <div class="hexagon"></div>
    701.       </div>
    702.     </section>
    703.     <section class="section">
    704.       <h2 class="title">八边形</h2>
    705.       <div class="wrapper">
    706.         <div class="octagon"></div>
    707.       </div>
    708.     </section>
    709.     <section class="section">
    710.       <h2 class="title">心形</h2>
    711.       <div class="wrapper">
    712.         <div class="heart"></div>
    713.       </div>
    714.     </section>
    715.     <section class="section">
    716.       <h2 class="title">无限符号</h2>
    717.       <div class="wrapper">
    718.         <div class="infinity"></div>
    719.       </div>
    720.     </section>
    721.     <section class="section">
    722.       <h2 class="title">菱形</h2>
    723.       <div class="wrapper">
    724.         <div class="diamond"></div>
    725.       </div>
    726.     </section>
    727.     <section class="section">
    728.       <h2 class="title">钻石</h2>
    729.       <div class="wrapper">
    730.         <div class="cut-diamond"></div>
    731.       </div>
    732.     </section>
    733.     <section class="section">
    734.       <h2 class="title">鸡蛋</h2>
    735.       <div class="wrapper">
    736.         <div class="egg"></div>
    737.       </div>
    738.     </section>
    739.     <section class="section">
    740.       <h2 class="title">吃豆人</h2>
    741.       <div class="wrapper">
    742.         <div class="pac-man"></div>
    743.       </div>
    744.     </section>
    745.     <section class="section">
    746.       <h2 class="title">popover</h2>
    747.       <div class="wrapper">
    748.         <div class="popover"></div>
    749.       </div>
    750.     </section>
    751.     <section class="section">
    752.       <h2 class="title">12边形</h2>
    753.       <div class="wrapper">
    754.         <div class="burst-12"></div>
    755.       </div>
    756.     </section>
    757.     <section class="section">
    758.       <h2 class="title">太极图</h2>
    759.       <div class="wrapper">
    760.         <div class="tai-ji"></div>
    761.       </div>
    762.     </section>
    763.     <section class="section">
    764.       <h2 class="title">徽章丝带</h2>
    765.       <div class="wrapper">
    766.         <div class="badge-ribbon"></div>
    767.       </div>
    768.     </section>
    769.     <section class="section">
    770.       <h2 class="title">放大镜</h2>
    771.       <div class="wrapper">
    772.         <div class="magnifying-glass"></div>
    773.       </div>
    774.     </section>
    775.     <section class="section">
    776.       <h2 class="title">圆锥</h2>
    777.       <div class="wrapper">
    778.         <div class="cone"></div>
    779.       </div>
    780.     </section>
    781.     <section class="section">
    782.       <h2 class="title">月亮</h2>
    783.       <div class="wrapper">
    784.         <div class="moon"></div>
    785.       </div>
    786.     </section>
    787.     <section class="section">
    788.       <h2 class="title">标签</h2>
    789.       <div class="wrapper">
    790.         <div class="tag"></div>
    791.       </div>
    792.     </section>
    793.     <section class="section">
    794.       <h2 class="title">导航</h2>
    795.       <div class="wrapper">
    796.         <div class="nav">
    797.           <ul class="list clearfix">
    798.             <li class="item">1</li>
    799.             <li class="item">2</li>
    800.             <li class="item">3</li>
    801.           </ul>
    802.         </div>
    803.       </div>
    804.     </section>
    805.     <section class="section">
    806.       <h2 class="title">优惠券</h2>
    807.       <div class="wrapper">
    808.         <div class="coupon">
    809.           <div class="coupon-main">
    810.             <em data-symbol="￥" data-desc="优惠券">10</em>
    811.           </div>
    812.           <div class="coupon-vice">立即领取</div>
    813.         </div>
    814.       </div>
    815.     </section>
    816.   </div>
    817. </body>
    818. </html>

    实不相瞒，这上面大部分都是我抄的！