CSS 四角样式

最新推荐文章于 2024-07-05 16:21:05 发布

杨三金

最新推荐文章于 2024-07-05 16:21:05 发布

阅读量557

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43731369/article/details/120157700

版权

效果预览

在这里插入图片描述

实现方式一

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css-四角样式</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script  src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
</head>

<body>
    <div class="box">

        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
    </div>

</body>

</html>

less

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color:blue;
        div{
            width: 20px;
            height: 20px;
            position:absolute;
        }
        .left-top {
            border-top: 3px solid #00d3e7;
            border-left: 3px solid #00d3e7;
            left: -2px;
            top: -2px;
        }
        .right-top {
            border-right: 3px solid #00d3e7;
            border-top: 3px solid #00d3e7;
            right: -2px;
            top: -2px;
        }
        .left-bottom {
            border-left: 3px solid #00d3e7;
            border-bottom: 3px solid #00d3e7;
            left: -2px;
            bottom: -2px;
        }
        .right-bottom {
            border-right : 3px solid #00d3e7;
            border-bottom: 3px solid #00d3e7;
            right: -2px;
            bottom: -2px;
        }
    
}

使用less写法，和传统CSS大同小异
如下四句实现div的居中显示

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

https://www.cnblogs.com/oito/p/12149512.html 解决less提供less引入不生效的一种解决方案

实现方式二多重背景

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css-四角样式</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background:
                linear-gradient(#00faff, #00faff) left top,
                linear-gradient(#00faff, #00faff) left top,
                linear-gradient(#00faff, #00faff) right top,
                linear-gradient(#00faff, #00faff) right top,
                linear-gradient(#00faff, #00faff) left bottom,
                linear-gradient(#00faff, #00faff) left bottom,
                linear-gradient(#00faff, #00faff) right bottom,
                linear-gradient(#00faff, #00faff) right bottom,
                blue;
            background-repeat: no-repeat;
            background-size: 20px 3px, 3px 20px;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

background用逗号分隔的多个值，可以设置多个背景
background-size 制定背景大小.

实现方式三利用伪元素

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css-四角样式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            top:50%;
            left:50%;
            transform:  translate(-50%,-50%);
        }
        .box::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            border-top: 3px solid #00faff;
            border-left: 3px solid#00faff;
            top: 0;
            left: 0;
        }
        .box::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            border-bottom: 3px solid #00faff;
            border-right: 3px solid #00faff;
            right: 0;
            bottom: 0;
        }

    </style>
</head>

<body>
    <div class="box virtual-box">
    </div>
</body>

</html>

因为目前可用的伪元素只有after 和 before 可以帮助实现效果，所以可以选择两角实现样式，如何实现四角样式，目前还没有更好的思路，欢迎大神给予灵感！

杨三金

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 四角样式

效果预览实现方式一html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css-四角样式</title> <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.c
复制链接

扫一扫