html+css实现三角形的三种方法

一、淘宝网的三角形实现

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}div{width:0;/*宽度可以继承*/height:0;/*高度不能继承*/border:50px solid red;/*border-width:50px;border-style:solid;border-color:red;*/border-color:yellow  transparent transparent transparent;}div:hover{border-color:transparent transparent yellow transparent;position:absolute;top:-50px;}</style></head><body><div></div></body>
</html>

二、京东网站三角形的实现方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0;margin:0;}div{width:0;height:0;border:50px solid red;border-color:transparent transparent red transparent;position:relative;}div::after{content:"";display:block;width:0;height:0;border:50px solid #000;border-color:transparent transparent #fff transparent;position:absolute;top:-43px;left:-50px;}</style></head><body><div></div></body>
</html>

三、易迅网三种形的实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding:0;margin:0;}div{width:50px;height:50px;border:1px solid transparent;position:relative;overflow:hidden;box-sizing: border-box;}p{font-size:30px;position:absolute;top:0;left:41px;}</style></head><body><div><p>◇</p></div></body>
</html>

html+css实现三角形的三种方法相关推荐

在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单一.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...
css设置行间距的三种方法
css设置行间距的三种方法 1.使用数值来设置行间距 CSS <!DOCTYPE html> <html><head><meta charset=" ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
css实现三角形的6种方法
在一些面试经验中,经常能看到有关css的题目都会有一道如何使用css绘制三角形,而常见的回答通常也只有使用border进行绘制一种方法. 而css发展到今天,其实有很多有意思的仅仅使用css就能绘制出 ...
CSS清除浮动的三种方法
第一种:使用div空标签法 <head> <style>.left, .right {float: left;width: 200px;height: 200px;backgr ...
CSS实现三角形的四种方法
方法一:使用 border (常见) [解释]不设置宽高,用边框大小控制三角型大小 [分解步骤] 设置一个div不设宽高 [示例] <style>#triangle{width: 0;he ...
CSS隐藏内容的三种方法比较
1.display:none; 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidd ...

html+css实现三角形的三种方法

一、淘宝网的三角形实现

二、京东网站三角形的实现方法

三、易迅网三种形的实现

html+css实现三角形的三种方法相关推荐

最新文章

热门文章