CSS伪元素实现三角形

最新推荐文章于 2024-07-11 21:11:19 发布

‌

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量1.8k

点赞数 3

文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_39337264/article/details/105221271

版权

什么是伪元素：
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

css有一系列的伪元素，如:before，:after，:first-line，:first-letter等。

1、CSS部分

.triangle{
    width: 200px;
    height: 100px;
    border-radius: 5px;
    border: 2px solid #000;
    position: relative;
 }
 .triangle:after{
    content: "";
    position: absolute;
    left: 200px;
    top:12px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #fff;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
 }
 .triangle:before{
    content: "";
    position: absolute;
    left: 200px;
    top:10px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid #000;
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
  }