非布局样式 - border 实现箭头(三角形)

最新推荐文章于 2024-07-18 10:04:43 发布

SarinaDu

最新推荐文章于 2024-07-18 10:04:43 发布

阅读量190

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/m0_37148591/article/details/107791443

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、前言

日常积累，欢迎指正

2、效果

在这里插入图片描述

3、效果在线查看

css 实现三角形以及其实用场景

4、原理

四边交界处为斜切

5、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test1{
            width: 0px;
            height: 0px;
            border-bottom: 30px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        .test2{
            width: 0px;
            height: 0px;
            border-left: 30px solid red;
            border-bottom: 20px solid transparent;
            border-top: 20px solid transparent;
        }
        .test3{
            width: 0px;
            height: 0px;
            border-right: 30px solid red;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }
        .test4{
            width: 0px;
            height: 0px;
            border-top: 30px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

        .demo{
            position: relative;
            height: 300px;
            width: 300px;
            background-color: yellowgreen;
        }
        .popWindow{
            position: absolute;
            top: 50%;
            right: -150px;
            transform: translateY(-50%);
            background-color: violet;
            padding: 16px;
            border-radius: 4px;
        }
        .popWindow::before{
            content: '';

            /* border-right: red solid 20px; */
            border-right: violet solid 20px;
            border-top: solid 10px transparent ;
            border-bottom: solid 10px transparent ;
            position:absolute;
            left:-20px;
            top:50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <h3> css 尖朝上的</h3>
    <div class="test1"></div>


    <h3> css 尖朝右的</h3>
    <div class="test2"></div>

    <h3> css 尖朝左的</h3>
    <div class="test3"></div>


    <h3> css 尖朝下的</h3>
    <div class="test4"></div>

    <!-- 实用 -->
    <h3> css 实现三角箭头的实用</h3>
    <div class="demo">
        <div class="popWindow">
            pop window
        </div>
    </div>
</body>
</html>

SarinaDu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
非布局样式 - border 实现箭头(三角形)

前言日常积累，欢迎指正效果效果在线查看css 实现三角形以及其实用场景源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫