首先附上效果图：

以上的效果完全是用 css 来实现的，那么是怎么实现的呢？

我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。

通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。

复制代码代码如下:

字符制作三角边框

*{margin:0;padding:0;}

body{font-family:SimSun;}

h1{text-align:center;}

.demo1{width:300px;margin:20px auto;border:1px solid red;height:100px;}

.demo1 em,.demo1 span{display:block;width:30px;height:16px;font-size:30px;overflow:hidden;_position:relative;margin-left:10px;}

.demo1 em{margin-top:-16px;color:red;font-style:normal;}

.demo1 span{margin-top:-14px;color:white;}

.demo2{width:300px;border:1px solid #F00;height:100px;position:relative;margin-left:auto;margin-right:auto;}

.demo2 em,.demo2 span{font-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;}

.demo2 span{left:-14px;color:white;}

demo1 是用 margin 方法

◆

demo2 是用 position 方法

◆

PS：除了用字符可以实现三角，我们还可以利用 border 来实现三角。具体地址：https://www.jb51.net/css/33748.html

css 科技边框_纯css制作带三角的边框(附效果图)相关推荐

css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
[css] 能不能使用纯css使你的浏览器卡死？怎么实现？
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放！
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

css 科技边框_纯css制作带三角的边框(附效果图)

demo1 是用 margin 方法

demo2 是用 position 方法

css 科技边框_纯css制作带三角的边框(附效果图)相关推荐

最新文章

热门文章

css 科技 边框_纯css制作带三角的边框(附效果图)

demo1 是用 margin 方法

demo2 是用 position 方法

css 科技 边框_纯css制作带三角的边框(附效果图)相关推荐

最新文章

热门文章

css 科技边框_纯css制作带三角的边框(附效果图)

css 科技边框_纯css制作带三角的边框(附效果图)相关推荐