css伪元素应用场景

2020-08-11 11:01:05 阅读：308 来源： 互联网

标签：场景元素 100px corner position div css absolute

想起年初遇到的一个css题，怎样实现下图所示的图形（这是我新写出来的效果图，大致是这样子的）：

思路：用两个div，实现左下和右上两个部分，可以，但遇到的问题很多，比如如何画三角形、如何组合两个div的位置，如何将文字显示在每个div里面等，而且这个效果其实更像是一个整体，用两个div来构建总显得不太合理和优雅。因此，我们考虑用一个div结合伪元素的方法实现。

首先我们定义文档结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="corner">
        <span>aaa</span>
    </div>
</body>
</html>

重点是css,我们定义div的基本内容，长宽、背景、水平居中等属性（relative方便伪元素定位）：

#corner {
  width: 100px;
  height: 100px;
  background: #fff;
  margin: 0 auto;
  position: relative;
}

左下角我们用伪元素：before画一个红色的三角形，如何画三角形、圆等常见图案可以自行百度：

#corner::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

接着用：after填充bbb这部分内容，并把它放右上角，最后调整下span的格式就完成任务了：

#corner::after {
  content: "bbb";
  position: absolute;
  right: 0;
}
span{
    position: absolute;
    bottom: 0;
}

当然，这只是我的一个思路，还有很多可以实现此状态的方法，欢迎大佬拍砖提供思路。

标签：场景,元素,100px,corner,position,div,css,absolute
来源： https://www.cnblogs.com/Leo-Do/p/13474282.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css伪元素应用场景