web基础·书写倒三角（div+伪元素::after）

最新推荐文章于 2023-06-01 10:12:59 发布

昔冰_G

最新推荐文章于 2023-06-01 10:12:59 发布

阅读量2.3k

点赞数

分类专栏：前端标签属性基础文章标签： html css

本文链接：https://blog.csdn.net/qq_38800316/article/details/118385068

版权

前端标签属性基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

倒三角可以看成是div的两条边组成，但是没有直接对div进行操作，因为如果div出来的两条边不会是一个倒三角，倒三角需要做旋转，如果要旋转，那么就会影响到div，所以用伪元素，在div的内部进行变换。

<style>
     div {
            width: 35px;
            height: 35px;
			line-height:35px;
            border-left: 1px solid #000000;
			border-bottom:1px solid #000;
			transform:rotate(-45deg);
         }
</style>

<body>
    <div>三角</div>
</body>

为了避免影响到div内部的变化，我们使用伪元素::after，在::after中做

<style>
        div {
            position: relative;
            width: 200px;
            height: 35px;
			line-height:35px;
            border-left: 1px solid #000000;
			border-bottom:1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 10px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            transform: rotate(45deg);
            transition: all 0.3s;
            /* 变化快不要忘记加transition过渡来辅助 */
        }
        /* 鼠标经过div，里面的三角旋转 */
        
        div:hover::after {
            /* 鼠标经过div但是让里面的after来进行旋转，所以做好对象的设定 */
            transform: rotate(225deg);
            /* 225=45+180,是因为这个转换是要在刚开始转完45°的基础上再转半圈实现原本向下最终向上的效果 */
        }
</style>

<body>
    <div>三角</div>
</body>

注意:hover中旋转的角度：225度=45度+180度；

解释：

45度是旋转成倒三角后的效果，是朝下；180度是在朝下的基础上再转180就是朝上

如果我们不加45度的话，就是在元素原生的基础上转180度

出生时是右下角，那在这个基础上转180度就变成了左上角，

可见它忽视了css中的transform:rotate(45deg)的样式设定，是从原始状态变换的。

昔冰_G

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web基础·书写倒三角（div+伪元素::after）

倒三角可以看成是div的两条边组成，但是没有直接对div进行操作，因为如果div出来的两条边不会是一个倒三角，倒三角需要做旋转，如果要旋转，那么就会影响到div，所以用伪元素，在div的内部进行变换。<style> div { width: 35px; height: 35px; line-height:35px; border-left: 1px solid #000000; b...
复制链接

扫一扫