DIV&CSS实现多种三角形及组合

最新推荐文章于 2021-10-12 21:54:13 发布

cellinlab

最新推荐文章于 2021-10-12 21:54:13 发布

阅读量500

点赞数

分类专栏： CSS 文章标签： css div 三角形 div三角形 border

本文链接：https://blog.csdn.net/funkstill/article/details/100100790

版权

CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="content triangle-top"></div>
  </div>
  <div class="container">
    <div class="content triangle-right"></div>
  </div>
  <div class="container">
    <div class="content triangle-no-bottom"></div>
  </div>
  <div class="container">
    <div class="arrow-wrapper">
      <div class="double-arrow"></div>
    </div>
  </div>
  <div class="container"></div>
  <style>
    .container {
      float: left;
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
    }
    .content {
      margin: 20px auto;
      width: 0;
      height: 0;
      border: 20px solid transparent;
    }
    .triangle-top {
      border-top-color: #ff0;
    }
    .triangle-right {
      border-right-color: #ff0;
    }
    .triangle-no-bottom {
      border-color: pink pink transparent pink;
    }
    .arrow-wrapper {
      position: relative;
      margin: 20px auto;
      text-align: center;
      width: 100%;
    }
    .double-arrow,
    .double-arrow::after {
      display: inline-block;
      position: relative;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-left-color: #0f0;
    }
    .double-arrow::after {
      content: "";
      position: absolute;
      left: 100%;
      top: -10px;
      bottom: 0;
    }
  </style>
</body>
</html>

cellinlab

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DIV&CSS实现多种三角形及组合

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
复制链接

扫一扫