用css的border属性实现三角

最新推荐文章于 2024-08-23 14:03:47 发布
最新推荐文章于 2024-08-23 14:03:47 发布
阅读量123 收藏
点赞数
分类专栏： css 文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/axl234/article/details/83985246
版权

在一个宽高为0像素的块状元素中设置border属性，例如

01.box{
02 
03 width:0px;
04 
05 height:0;
06 
07 border-bottom:50px #F00 solid;
08 
09 border-left:50px #03F solid;
10 
11 border-right: 50px #F90 solid;
12 
13 border-top:50px #6C0 solid;
14 
15}

在浏览器中的显示如图：

2009-09-14_225923

这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角：

01 .to-top{
02 
03 display:block;
04 
05 overflow:hidden;
06 
07 width:0px;
08 
09 height:0px;
10 
11 border:6px solid #ccc;
12 
13 border-color:#ccc #fff;
14 
15 border-width:0 6px 6px 6px;
16 
17}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用css的border属性实现三角</title>
<style type="text/css">
<!--
.box{ width:300px; height:300px; background:#CCC; position:relative;  top:100px;left:100px }
.to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
.to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
.to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
.to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
-->
</style>
</head>

<body>
<div class="box"><em class="to-top"></em><em class="to-right"></em><em class="to-bottom"></em><em class="to-left"></em></div>

</body>
</html>

axl234
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性
weixin_34036075的博客
06-04 2068
基础你可能很熟悉边的最基本用法。CSS Code复制内容到剪贴板border:1pxsolidblack;上面的代码将给元素应用1px的边。即简洁又简单；但我们也可以稍作修改。CSS Code复制内容到剪贴板border-width:thick;border-style:solid;border-color:black;除了指定具体的边框宽度值，也可以使用这三个关键词：thin，medium 和 ...
用css写一个三角形（border属性）
weixin_60789461的博客
02-01 333
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .triangle{ width: 0px; height: 0px; border-top: 200px transparent ; border-bottom: 200px solid transparen...
CSS border实现三角形
cui_angel的专栏
12-14 5763
一、原理 CSS盒模型 一个盒子包括：margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等。 调整宽度大小可以调节三角形形状。 示例1： 一般情况下，我们设置盒子的宽高度及上下左右边框，会呈现如下图： CSS语言: 高亮代码由发芽网提供 1 #tes
css表示em效果,em标签结合css的border属性实现流行的倒三角效果
weixin_36073959的博客
08-04 254
em标签结合css的border属性实现流行的倒三角效果(2012-06-26 09:16:30)分类：前端/p>Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">em标签结合css的border属性实现流行...
为图片镶边及边框翻转效果
lee576的专栏
10-06 1422
img { width: 300px; border: 6px double #666; //这是一个双线的边框 background: #fff; padding: 6px;} //如果要作图片链接,可以用:hover伪类实现鼠标移动到边框,改变边框样式的效果a;hover img { border-style: solid; background: #999;}
用css的border属性实现tip三角
讲不出再见
09-14 808
先看看应用实例吧： 实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如 01 .box{ 02   03 width:0
CSS的border属性绘制简单三角形、边框三角形
weixin_51345632的博客
09-29 3407
伸缩盒布局（ Flexbox ）
CSS Border属性制作小三角
12-12
效果如下： 鼠标放上显示第二个的效果！这个不知道在哪里看的，转过来了，地址不记得了，感谢原作者 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<...title
用css border实现尖三角的写法(无图片)
09-25
下面我们将详细讨论如何通过CSS border来实现尖三角形，并探讨其原理和拓展应用。 首先，我们来看给出的示例代码： ```html <!DOCTYPE HTML> <style type="text/css"> *{margin:0;padding:0;} body{...
详解CSS3 用border写 空心三角箭头 (两种写法)
09-27
本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在第一种方法中，我们使用了`::after`伪元素来创建空心三角箭头。首先，我们...
JS小笔记
Jone's Area
11-20 197
常用笔记 1、手机号检测正则： var myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/; if (!myreg.test($poneInput.val())) { return false; } else { return true; ...
ToDoList—最简单的待办事项列表
remakez的博客
10-15 1054
ToDoList—最简单的待办事项列表 代码如下：(样式与网上的相同，js代码不同) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sca
用css的border属性实现三角 转
讲不出再见
09-12 465
今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的，在现实的前端开发中也很有用，至少可以减小图片的字节。 先看看应用实例吧： 实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如 .box{ wi
在制作todolist网页的时候，遇到一个问题，有人吗~
qq_20261833的博客
04-01 125
在使用jQuery的load()函数的时候，加载创建<li>标签时候，创建的li闪一下消失了。请问有人知道这是怎么回事吗~ HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v...
利用border实现三角形
初漾的博客
06-05 1041
Title .app{ width: 0; height: 0; border-width: 8px; border-style: dashed dashed solid; border-color: transparent transparent #c2c2c2; } 关键点：(1)borde
border缩写属性
qq_43812504的博客
12-07 1715
border缩写属性： 设置的属性分别（按顺序）：border-width, border-style,和border-color. 如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。 border其他属性用法： 单个边的复合样式 border-left:thick double #ff0000; 单个边的某一具体样式： border-bottom-color:red; border-bottom-width:2px; border-bottom-style:solid;
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 341
itextpdf，html转pdf
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260
最新发布
08-31
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260提取方式是百度网盘分享地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值