css指示箭头两种实现方法

lylszo 2020-04-07 原文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  div, p {
    width: 200px;
    height: 100px;
    margin: 30px;
    background-color: orange;
    position: relative;
  }
  div:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 100%;
    border: solid transparent;
    border-width: 30px;
    margin-left: -30px;
    border-top-color: orange;
  }
  p:before, p:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    top: 100%;
    left: 50%;
    background-image: linear-gradient(315deg, transparent 50%, orange 50%, orange 100%);
  }
  p:before {
    margin-left: -30px;
    background-image: linear-gradient(45deg, transparent 50%, orange 50%, orange 100%);
  }
</style>
<body>
  <h3>css指示箭头两种实现方法：</h3>
  <h5>1、通过border属性实现, 参考网站：<a href="http://www.cssarrowplease.com/" target="_blank">http://www.cssarrowplease.com/</a></h5>
  <div></div>
  <h5 style="margin-top: 100px;">2、通过background-image属性的线性渐变函数实现</h5>
  <p></p>
</body>
</html>