伪元素-空心倒三角

来源：互联网发布：算法初步ppt 编辑：程序博客网时间：2024/06/11 12:15

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>小三角</title>    <style>        .z_r:before{            content: '';            border-left: 10px solid transparent;            border-right: 10px solid transparent;            border-bottom: 10px solid red;            position: absolute;            top: -10px;            left: 20px;        }        .z_r:after{            content: '';            border-left: 10px solid transparent;            border-right: 10px solid transparent;            border-bottom: 10px solid white;            position: absolute;            top: -8px;            left: 20px;        }         .z_r {            position: absolute;            width: 100px;            margin: 100px auto;            background-color: white;            border: 1px solid red;            text-align: center;         }         body {            background-color: black         }    </style></head><body>    <div class="z_r">伪元素箭头</div></body></html>

阅读全文

0 0