html+css实现不规则边框

最新推荐文章于 2024-04-25 18:36:27 发布
置顶 最新推荐文章于 2024-04-25 18:36:27 发布
阅读量1.5k 收藏 6
点赞数 1
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmiaoChong/article/details/111349603
版权

使用css的border实现不规则边框

html结构

 <div class="test">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

css结构


    .test {
      width: 300px;
      height: 300px;
      background-color: springgreen;
      margin: 0 auto;
      box-shadow: inset 0px 0px 67px 37px #cccccc; /* 实现蒙蔽效果 */
      position: relative;
    }

    .test span:nth-child(1) {
      display: block;
      width: 50px;
      height: 50px;
      border-top: 3px solid #00d3e7;
      border-left: 3px solid #00d3e7;
      position: absolute;
    }

    .test span:nth-child(2) {
      display: block;
      width: 50px;
      height: 50px;
      border-top: 3px solid #00d3e7;
      border-right: 3px solid #00d3e7;
      position: absolute;
      right: 0;
      top: 0;
    }

    .test span:nth-child(3) {
      display: block;
      width: 50px;
      height: 50px;
      border-left: 3px solid #00d3e7;
      border-bottom: 3px solid #00d3e7;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .test span:nth-child(4) {
      display: block;
      width: 50px;
      height: 50px;
      border-right: 3px solid #00d3e7;
      border-bottom: 3px solid #00d3e7;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .test span:nth-child(4)::after {
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: #fff;
      z-index: 10;
      border: 2px solid transparent;
      top: 26px;
      left: 26px;
      transform: rotate(45deg);
      border-left-color: yellow;

    }

整体效果

在这里插入图片描述

完整代码

<!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>
    * {
      margin: 0;
      padding: 0;

    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    section {
      width: 300px;
      height: 300px;
      background-color: blue;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50px;
      left: 50px;
    }

    .test {
      width: 300px;
      height: 300px;
      background-color: springgreen;
      margin: 0 auto;
      box-shadow: inset 0px 0px 67px 37px #cccccc;
      /* 实现蒙蔽效果 */
      position: relative;
    }

    .test span:nth-child(1) {
      display: block;
      width: 50px;
      height: 50px;
      border-top: 3px solid #00d3e7;
      border-left: 3px solid #00d3e7;
      position: absolute;
    }

    .test span:nth-child(2) {
      display: block;
      width: 50px;
      height: 50px;
      border-top: 3px solid #00d3e7;
      border-right: 3px solid #00d3e7;
      position: absolute;
      right: 0;
      top: 0;
    }

    .test span:nth-child(3) {
      display: block;
      width: 50px;
      height: 50px;
      border-left: 3px solid #00d3e7;
      border-bottom: 3px solid #00d3e7;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .test span:nth-child(4) {
      display: block;
      width: 50px;
      height: 50px;
      border-right: 3px solid #00d3e7;
      border-bottom: 3px solid #00d3e7;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .test span:nth-child(4)::after {
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: #fff;
      z-index: 10;
      border: 2px solid transparent;
      top: 26px;
      left: 26px;
      transform: rotate(45deg);
      border-left-color: yellow;

    }
  </style>
</head>

<body>
  <div class="test">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

</html>
喵喵虫
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3绘制不规则图形的一些方法示例
12-04
前言 CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。 现在，我们已经可以使用CSS 3 常见不规则复杂图形了，如下图所示： 使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图： 注：这是CSS的最
炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用
04-02
炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用
CSS border边框（理解网页边框制作）
最新发布
百赢出品，必属精品
04-25 3766
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
html5+css3制作各种响应式不规则的网页单元分割线
12-13
这是一款使用html5 svg和css3伪元素制作的各种不规则的水平分割线响应式单页模板。页面采用扁平化设计风格，各种分割线设计的精美绝伦。
html怎么设置不规则图形,css如何设置不规则边框？
weixin_42354972的博客
06-04 1212
css如何设置不规则边框？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css如何设置不规则边框？在CSS中，可以通过border-image属性来设置不规则边框。border-image属性可以使用图像来设置边框的样式。示例：#borderimg1 {border: 10px solid transparent;padding: 15px;-webk...
不要图片？CSS实现大屏常见不规则边框（系列一）
苏苏就是小苏苏的博客
03-28 3009
不要图片？CSS实现大屏常见不规则边框（系列一）
css 画多边形、不规则边框
热门推荐
qq_34169240的博客
07-10 1万+
1.画梯形： width: 200px; height: 0px; border-top: 0px; border-bottom: 70px solid #1E6AA4; border-right: 50px solid transparent; border-left: 50px solid transparent; 2.画三角形： ...
css 不规则边角_css实现四种常见边框内外角组合
weixin_39980002的博客
12-22 996
首先让我们先来看看效果图吧：展示图其中，div1:边框内外直角矩形;div2:边框内外圆角矩形;div3:边框内直角外圆角;div4:边框内圆角外直角。接下来我们来看看实现代码，为了方便，我就直接用div1,2,3,4称呼它们吧。这里我先将我用到的通用类写出来:.font{color:#00ff00;text-align: center;}.divSize{margin:2em;width:5em...
html+css+js实现罗盘时钟
03-18
在“罗盘时钟”项目中，CSS可能包含了设置背景、边框、阴影、旋转和动画效果的规则，以实现罗盘的视觉效果。例如： ```css #compassClock { width: 300px; height: 300px; border-radius: 50%; position: ...
用HTML+CSS制作微博的静态页面.zip
06-21
- 使用媒体查询（`@media`规则）来根据设备特性应用不同的CSS样式。 - `viewport`元标签（`, initial-scale=1">`）确保在移动设备上正确缩放页面。 - 弹性布局（Flexbox）或网格布局（Grid）可以创建更灵活的布局...
HTML+CSS课程设计HTML
10-27
媒体查询（media queries）是实现这一目标的关键工具，它们允许我们针对不同的设备特性应用不同的CSS规则。 除此之外，你还会学习到关于HTML5的新特性和API，如语义化元素（如、、等）、离线存储、拖放功能、Web...
html+css+js购物车
09-24
对于购物车页面，我们可以使用CSS来设置字体、颜色、背景、边框等视觉效果。使用Flexbox或Grid布局可以实现商品列表的灵活排列，确保在不同屏幕尺寸下都能良好展示。例如，设置`display: flex;`或`display: grid;`，...
Lenovo模仿联想官网html+css.zip
07-17
- 内联样式：直接在HTML元素的`style`属性中写CSS，但不推荐，因为不利于代码维护和复用。 - 内部样式：在`<head>`中的`<style>`标签内定义CSS，适用于整个页面的样式。 - 外部样式：将CSS写入单独的`.css`文件，...
CSS使用clip-path绘制一个不规则边框
pnjtvxcp的博客
06-19 3873
简介 clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。 ...
CSS3 边框(Border)功能之border-image
YYDataV的博客
04-27 688
border-image 用于将图像添加到边框。语法： border-image: source slice width outset repeat|initial|inherit; border-image-source 用于指定要用于绘制边框的图像的位置 border-image-slice 规定图像边框的向内偏移。 border-image-width 规定图像边框的宽度。 border-image-outset 规定边框图像超过边框盒的量。 borde
不规则多边形css,css 画多边形、不规则边框
weixin_29698317的博客
08-03 1218
1.画梯形：width: 200px;height: 0px;border-top: 0px;border-bottom: 70px solid #1E6AA4;border-right: 50px solid transparent;border-left: 50px solid transparent; 2.画三角形：width: 0px;height: 0px;border-color: #...
css边框图片的使用场景
m0_50441807的博客
07-30 873
border-image的第一个属性是图片地址，第二个属性是切的距离，第三个属性是边框的大小，第四个属性比较不常用，默认为0就好，第五个属性是选择填充还是拉伸；原理就是把这张图片切四刀，保证四个角的图片的比例不变，也就是四个角不会变形（1，3，6，8），然后2，4，5，7的位置拉伸或填充，这样无论盒子是多高多宽，都不会破坏图片四个角的比例；做大屏可视化的时候，往往会有一些边框的背景图片，但是由于可视化的盒子宽高是自适应的，也就是宽度和高度是不固定的；...
CSS 不规则的标题框样式
weixin_43942765的博客
08-26 729
展现一个框框的demo，难点就在于不规则的标题框这里，像是一个长方形减去了一个梯形，然后在梯形中添加两个按钮，按钮还要显示成平行四边形
CSS不规则边框解决方案
weixin_47942178的博客
12-19 1421
不规则边框绘制，在CSS中一致是比较困难的点，下面尝试使用CSS Painting API解决这一复杂性问题。
vue css 不规则边框 流光效果
02-02
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成独立的、可复用的组件。Vue提供了一套响应式的数据绑定机制，使得数据的变化能够自动反映在页面上。 CSS不规则边框是指在元素的边框上创建一些非传统形状的效果，例如波浪、斜线、曲线等。这种效果可以通过CSS的border属性和伪元素来实现。具体实现方式有很多种，可以使用SVG、clip-path、border-image等技术来实现。 流光效果是指在元素上创建一种类似流动的光线效果，通常用于增加页面的动感和吸引力。这种效果可以通过CSS的渐变、动画和伪元素来实现。可以使用linear-gradient函数创建线性渐变，配合animation属性和keyframes关键帧来实现流动的效果。 如果你想了解更多关于Vue、CSS不规则边框和流光效果的内容，可以参考以下资源： - Vue官方文档：https://vuejs.org/ - CSS不规则边框教程：https://www.w3schools.com/css/css3_borders.asp - CSS流光效果教程：https://www.w3schools.com/css/css3_gradients.asp

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值