css边框并不是一个矩形。看下面的代码：
<html> <head> <style type="text/css"> &n
原创
2013-05-05 19:38:28
675阅读
.sanjiao{ width:0px; height:0px; /* background-color: red; */ border: 50px solid; border-top-color: transparent; border-right-color: transparent; bord
原创
2022-06-27 10:51:40
239阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
原创
2022-06-27 10:52:43
113阅读
一、说是高级应用，准确讲应该是“复杂应用”。就是说用两个标签（或无标签 – 使用:before与:after伪类）形成的两个不同的边框进行组合显示实现的一些效果。 看下面两个图，本单元就是要实现下面两种效果： 1、效果(1) CSS代码如下： .test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; po
转载
2024-08-19 18:53:55
114阅读
HTML：<p class="tooltip">定义：连接设备的用户数<br>当前：正在连接设备的用户数<br>今日：到
原创
2022-07-20 06:19:17
597阅读
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strick//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator
原创
2014-03-18 09:49:32
1783阅读
简述在前面，我们分享过关于三角的实现方式，主要根据border属性来设置，下面我们来实现上、下、左、右各种不同颜色的三角。简述实现效果源码实现效果源码<!DOCTYPE html><html><head><style type='text/css'>/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px so
原创
2022-07-29 11:26:31
179阅读
最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现： 很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似： 其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩
原创
2022-04-30 21:35:26
549阅读
网页中三角制作 width: 0; height: 0; border-color: transparent white transparent transparent; border-style: solid; border-width: 50px 10px 0 0 ; 或 width: 0; h ...
转载
2021-07-28 15:37:00
201阅读
2评论
实例一： 实现的效果如下图： 实例二： 实现的效果如下图：
转载
2019-06-20 21:53:00
454阅读
2评论
CSS三角制作（HTML、CSS）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
原创
2022-10-20 10:14:06
160阅读
用css制作一个三角形箭头 三角形我们经常用在列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用，比如，在有下拉列表的地方，我们可以用向下的箭头，在列表的时候，我们能告诉用户每个列表项和下一个列表项的关系，当在面包屑导航中，能让用户了解他现在所处的栏目或者频道。我们有哪些方法来实现它呢，下面我根据我们的实际工作中的经验作了简单的总结。第一种方案，我们可以通过使用背景图片的方式来处理
转载
2023-10-08 11:08:08
519阅读
最新纯css实现三角以下是三零网为大家整理的最新纯css实现三角的文章，希望大家能够喜欢!样式表 body,ul { margin:0; padding:30px; }li { list-style:none;}a { text-decoration:none; }i { display:block; width:0; height:0; font-size:0; borde
转载
精选
2016-03-05 14:17:04
455阅读
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
原创
2012-09-10 18:02:49
700阅读
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1 { width: 0; height: 0; border: 40px ...
原创
2020-02-15 21:24:44
142阅读
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>
原创
2020-02-15 21:24:44
87阅读
1 .header_c .hea-top span{ 2 display: inline-block; 3 width: 0; 4 height: 0; 5 border: 8px solid transparent; 6 border-top-color: #333; 7 /* 在位置上的小偏差移 ...
转载
2021-08-03 20:52:00
132阅读
2评论
display: inline-block; border-right: 2px solid #E4E4E4; border-bottom: 2px solid #E4E4E4; width: 10px; height: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
原创
2022-01-16 11:03:27
2037阅读
