星星博客 »  > 

2021-06-04

CSS奇思妙想
合理利用伪元素
虽然说是一个标签,但是几乎所有打着单标签实现图形标题的例子,其中都使用了 3 个元素。这就是单标签实现图形上最为核心的一部分:我们除了元素本身的样式能够控制之外,还有元素的两个伪元素 – ::before,::after,实际上一共是 3 个元素。
譬如下面这个心形图形,只能使用一个 div 实现它,该怎么做呢:
在这里插入图片描述
这种不规则的图形本身使用纯 CSS 是比较复杂的,通常会借助 SVG,当然在 CSS 中就是使用 clip-path。不过仔细观察图形,我们不需要 clip-path,尝试将图片分成 3 部分:
在这里插入图片描述
其实这里,我们只需要元素本身实现正方形,元素的两个伪元素利用绝对定位实现两个圆形,叠加在一起即可!完整的代码也非常简单:

div {
    position: relative;
    transform: rotate(45deg);
    background: rgba(255, 20, 147, 0.85);
    width: 140px;
    height: 140px;
}
div::before,
div::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgb(255, 20, 147);
}
div::before {
    top: -70px;
    left: 0;
}

相关文章