CSS写三角

css写小三角


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .dot {
            width:0;
            height: 0;
            /*font-size: 0;*/
            /*line-height: 0;*/

            border-width: 10px;
            border-style: solid;  /*必须设置,默认样式为none*/
            /*border-bottom-style: solid;*/

            border-top-color: red;
            border-bottom-color: pink;
            border-left-color: blue;
            border-right-color: yellow;
        }
        /*向下箭头*/
        .top{
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /*向右箭头*/
        .left{
            border-right-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /*向左箭头*/
        .right{
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /*向上箭头*/
        .bottom{
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
        }
    style>
head>
<body>
  <div class="dot top">div>
  <div class="dot bottom">div>
  <div class="dot left">div>
  <div class="dot right">div>
body>
html>

你可能感兴趣的:(Css)