利用border-width实现等腰直角三角形，兼容IE6+、FF、chrome

最新推荐文章于 2024-08-02 06:15:47 发布
最新推荐文章于 2024-08-02 06:15:47 发布
阅读量123 收藏
点赞数
文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling1990822/article/details/84127788
版权 
<!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>利用border-width实现等腰直角三角形</title>
<style>
	body{margin:0;background:#FFF}
	.d_a{width:100px;height:17px;margin:0 auto;border:1px solid #CCC;position:relative}
	.s_a{border-width:5px;border-style:solid;border-color:#000 #FFF #FFF #FFF;width:0;height:0;position:absolute;top:6px;right:3px;cursor:pointer;_overflow:hidden;}
</style>
</head>

<body>
	<div class="d_a">
    	<span class="s_a"></span>
    </div>
</body>
</html>

 

修改border-color可实现4个方向的三角。

SeaHorse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
border实现三角形，等腰梯形原理
jontyy的博客
05-18 587
border实现三角形，等腰梯形原理 introduce 我我我，之前在看360前端星的时候，有道题目让用纯css实现一个圆的八等分， 后来在看面试题的时候又看到用纯css实现带边框的三角形和带三角形的消息框，闲着没事就做了一下demo。 嗯， 是根据网上的demo改的。 转述自 https://www.cnblogs.com/youhong/p/6530575.html 随便扯扯 我是个菜...
用css写一个三角形（border属性）
weixin_60789461的博客
02-01 327
<!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实现各个方向等腰直角三角
anhanzhen0466的博客
05-25 169
CSS代码： 1 .border_cort, .border_corr, .border_corb, .border_corl { 2 display: inline-block; 3 width: 0; 4 height: 0; 5 border-width: 6px; 6 overflow: hidden; 7 ...
使用border做三角形
yb1993的专栏
11-03 375
网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置，当四个边相交的时候他们是什么时候改变的？ .t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px gr
CSS 边框技巧（等腰三角形 、直角三角形）
Ares5k
04-07 1235
利用盒子边框画三角
用border属性来画三角形
liubangbo的专栏
12-01 265
在微信公众号上看到一篇用border属性来画三角形的文章，今天来试验一下，果然好使。需求：画一个等腰三角形，底边长200，腰长100。 我们一步一步来实现此需求。 1） 实现一个200宽度的正方形，使其水平垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
浅析border-radius如何兼容IE
09-28
本文将详细讲解如何使`border-radius`在IE浏览器中实现兼容。 首先，我们需要了解`border-radius`的基本用法。在现代浏览器中，我们可以像下面这样设置一个圆形元素： ```css .d1 { width: 5em; height: 5em; ...
border-radius IE8兼容处理的方法
11-21
为了在IE8中实现`border-radius` 的效果，我们可以利用一种叫做“Progressive Internet Explorer” (PIE) 的JavaScript库。PIE.htc 是一个行为（behavior）文件，它可以模拟CSS3的某些特性，包括`border-radius`，在...
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
10-27
为了克服这一问题，我们可以利用jQuery来实现图片的等比例缩放，并解决在IE6中的兼容性问题。 首先，我们要了解`max-width`和`max-height`这两个CSS属性的作用。`max-width`定义了元素的最大宽度，当图片的原始宽度...
Bootstrap-datetimepicker先天bug修复，兼容IE6+
12-16
然而，如同许多前端组件一样，它可能存在一些与特定浏览器兼容性相关的先天bug，特别是对于老版本的Internet Explorer（如IE6、IE7等）。在这些老版本的IE浏览器中，由于其对CSS3、JavaScript和DOM的支持有限，可能...
边框属性的使用 （使用边框属性绘制三角形）
wenzhenqing的博客
07-08 492
1.组成边框的样式 - 边框宽度 border-width - 边框样式 border-style - 边框颜色 border-color 2.边框属性的属性值 - 边框宽度:数值加单位(px) - 边框样式:solid(实线) dashed(虚线) dotted(点线) double(双实线) - 边框颜色 - 英文单词:yellow、green、red... - 十六进制
border属性绘制三角形
非典型程序员
11-02 523
用 CSS 绘制三角形，只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下，就会发现其中的技巧。下面，我们先看以下代码： HTML代码： ---------- CSS代码： .test{ width: 10px; height: 10px; border-top: 50px solid black; border-right: 5
XHTML 简介
wjs2024的博客
08-02 404
XHTML，即“可扩展超文本标记语言”（eXtensible HyperText Markup Language），是一种基于XML的标记语言，旨在取代HTML作为网页内容的标准格式。XHTML继承了HTML的许多特性，但更加严格和规范，要求文档结构更加严谨，标签和属性必须正确嵌套和闭合。这种严格性使得XHTML文档更加易于解析，也更适合在不同的设备和平台上展示。
开关电源中，穿越频率的大致选择范围
08-05
在开关电源设计之中，穿越频率是一个相当重要的指标。在文中从就开关电源设计中的环路反馈控制方法、环路增益作 用进行了阐述。并在此基础上就穿越频率选取的限制条件进行分析，为开关电源设计中的穿越频率选取提供借鉴。 穿越频率 ；开关电源设计 ；选取方法 ；限制条件 开关电源设计过程中，环路反馈控制回路的的性能决定了电 源的精度和整体性能，因此设计一个优良的环路控制回路对开发 一个开关电源系统至关重要。其中穿越频率的选取又是反馈回路 设计中的关键因数。
销售员各月销售提成计算.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
营销数据看板-多样式分析销售数.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
新产品市场调查结果与分析.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
政企数字化转型数据治理平台解决方案（32页）.pptx
最新发布
08-05
政企数字化转型数据治理平台解决方案（32页）
源代码-YimonTemplate (ASP模板引擎) v1.5.20120823 UTF8.zip
08-05
源代码-YimonTemplate (ASP模板引擎) v1.5.20120823 UTF8.zip
跨浏览器兼容性：div+css适配IE6-9与Firefox、Chrome技巧
"本文主要探讨如何使用div+css实现对IE6、IE7、IE8、IE9以及Firefox、Chrome等主流浏览器的兼容性问题，包括DOCTYPE的影响、居中策略、盒模型差异、cursor样式、链接样式、垂直居中、边框与背景色的设置、以及ul标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值