用css3伪类画小三角

完整的一个边框是将一个小的盒子按照对角线平均分成四份的,如:在这里插入图片描述
在用伪类给一个盒子下方添加小三角时,可以按照给其不同的方向设置transparent颜色属性来制作不同的形状。伪类元素after和before是所要添加的相应位置,content是在相应位置所要添加的内容,若为空,即只添加边框形状。

.box2:after{content:"";border-width:20px;border-style:solid;border-color:red blue yellow green;}
/*border-width是边框宽度,可用来设置图形的大小,此处的结果如上图*/
.box2:after{content:"";border-width:20px;border-style:solid;border-color:red blue transparent transparent;}
/*通过这个可以绘制处一个下图一样的小三角*/

在这里插入图片描述

遇到的问题:

在制作一个盒子的小三角时,出现如下图形状:
用css3伪类画小三角_第1张图片
无论给此伪类元素使用absolute或relative都无法准确定位到盒子里,使用relative会出现上图情况,使用absolute时,图形正确,但是位置是相对于浏览器而言的。
用css3伪类画小三角_第2张图片
查验代码之后发现,造成上述结果原因是:未给其父元素加position定位。父元素的position的值任意,但伪类元素的必须为absolute。
解决后代码如下:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        * {margin: 0;padding: 0;}
        .box,.box2{border: 2px solid #f10215;width: 100px;height: 100px;margin:10px auto;position:relative;}

        .box:after {content: "后面";}/*将内容添加到此元素中的内容的后面*/
        .box:before {content: "前面";  }/*将内容添加到此元素中的内容的前面*/

        .box2:after{content:"";border-width:20px;border-style:solid;
            border-color:transparent red blue transparent;position:absolute;
            bottom:0;right:0;z-index: 2;}
    style>
head>
<body>
<div class="box">
    啦啦啦
div>
<div class="box2">

div>
body>
html>

用css3伪类画小三角_第3张图片

补充知识点:

描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
relative 生成相对定位的元素,相对于其正常位置进行定位。
fixed 生成固定定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
sticky 粘性定位,该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

你可能感兴趣的:(遇到的问题)