css实现斜角边框

梦里梦外; 2022-09-09 13:53 783阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

.dot{ 
        width:2px;height:2px;border-radius: 100%;background-color: #c6a35e;display: block;position: absolute;z-index: 999
    }
    .dot-tl{ left:0px; top:0px;}
    .dot-tr{ right:0px; top:0px;}
    .dot-bl{ left:0px; bottom:0px;}
    .dot-br{ right:0px; bottom:0px;}
    .sbg{ 
            padding:15px 15px ;
            background: #fff;
            background:
                        linear-gradient(45deg, transparent 6px, #fff 0)bottom left  ,
                        linear-gradient(-45deg, transparent 6px, #fff 0)bottom right,
                        linear-gradient(-135deg, transparent 6px, #fff 0)top right  ,
                        linear-gradient(135deg, transparent 6px, #fff 0)top left  ;
            background-size: 51% 51% ;
            background-repeat: no-repeat;
    }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/53c1957cc5bc46e69adb0041a525d4bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/761e1f5f7a8847d2a862ae55224a4f8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，783人围观）

还没有评论，来说两句吧...

相关阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 80 阅读

相关 CSS实现流动边框

【写在前面】咳咳，首先讲个题外话，原本我是做 C++/Qt 的，然而因为工作 ( 部分原因 ) 学起了前端。当然，这也并不意味着我会丢掉 C++/Qt/Qml 这些

今天药忘吃喽~/ 2022年12月13日 11:27/ 0 赞/ 229 阅读

相关 CSS 边框

CSS 边框 ![在这里插入图片描述][20210325175954268.gif] > CSS 边框样式 > border-style 属性指定要显示的边框类型。

灰太狼/ 2022年11月13日 04:26/ 0 赞/ 149 阅读

相关 CSS实现渐变圆角边框

> 渐变边框可以使用 `border-image`，但带有圆角的渐变边框单靠 `border-image`却无法实现，那有哪些方法可以实现圆角渐变边框呢？ [css实用小知

小鱼儿/ 2022年10月19日 00:50/ 0 赞/ 274 阅读

相关 css实现斜角边框

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_s

梦里梦外;/ 2022年09月09日 13:53/ 0 赞/ 784 阅读

相关 CSS实现表格项斜角

在进行表格项斜角设置之前，先讲述一个边框的设置效果，代码和实现的效果如下： border{ border-top:30px solid f00;

向右看齐/ 2022年06月10日 13:53/ 0 赞/ 768 阅读

相关 CSS实现边框圆角

CSS实现边框圆角通过设置border-radius可以实现圆角边框的效果。 1.分别设置四个角的半径值在border-radius属性中，依次书写四个角的半

短命女/ 2022年06月09日 05:39/ 0 赞/ 401 阅读

相关【CSS】边框

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

淩亂°似流年/ 2022年04月01日 02:51/ 0 赞/ 276 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 349 阅读

相关 CSS边框

边框每个边框有 3 个方面：宽度、样式，以及颜色。 ![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc

雨点打透心脏的1/2处/ 2021年10月19日 10:18/ 0 赞/ 392 阅读