html写三角形,css3怎么写三角形？

网页很多时候都应用了css3来写三角形，那么css3要怎么写三角形呢？下面我们来看一下css3写三角形的方法。

css3写三角形(为了好区分姑且按方向区别)：

HTML代码：

css代码：/*箭头向上*/

.arrow-up {

width:0;

height:0;

border: 30px solid transparent;

border-bottom:20px solid red;

}

/*箭头向下*/

.arrow-down {

width:0;

height:0;

border: 30px solid transparent;

border-top:20px solid #0066cc;

}

/*箭头向左*/

.arrow-left {

width:0;

height:0;

border: 30px solid transparent;

border-right:30px solid yellow;

}

/*箭头向右*/

.arrow-right {

width:0;

height:0;

border: 30px solid transparent;

border-left: 50px solid green;

}

效果图：

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：border-width

border-style

border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。border-width 规定边框的宽度。

border-style 规定边框的样式。

border-color 规定边框的颜色。

inherit 规定应该从父元素继承 border 属性的设置。

html写三角形,css3怎么写三角形？相关推荐

在html中写三角,css3怎么写三角形？
网页很多时候都应用了css3来写三角形,那么css3要怎么写三角形呢?下面我们来看一下css3写三角形的方法. css3写三角形(为了好区分姑且按方向区别): HTML代码: css代码:/*箭头向上 ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
纯html5+css3能写出什么惊人效果
纯html5+css3能写出什么惊人效果? 在搞清楚这个问题之前,我们得先弄清楚H5和css3有哪些惊人的特性首先我们来看下H5的新特性,canvas标签,多媒体标签(audio/video) 离 ...
HTML页面多个平行四边形,用css3旋转写平行四边形
今天要布局的网页背景是一个平行四边形,切图作为背景不好,很影响网页的打开速度,,那么这个平行四边形就css代码写出来,可以用css3的CSS3 transform 旋转的属性写出来,就是transfo ...
python中ifelse语句怎么写_pythonifelse语句怎么写
2020-09-07阅读(7) 本文主要为您介绍css3三角形怎么写,内容包括css3怎么写三角形支持ie8,如何用CSS写一个三角形,怎么利用CSS3绘制三角形.1.可以用css3的border-r ...
写时复制，写时拷贝，写时分裂，Copy on write
2019独角兽企业重金招聘Python工程师标准>>> 写时复制,写时拷贝,写时分裂 (Copy-on-write,简称COW)是计算机资源管理方面的一种优化技术,有着广泛的应用,比 ...
同事说，我写Java代码像写诗
文章来源:http://33h.co/kntu3 前几天空闲时间写了一遍关于平时自己写代码的一些习惯,这里跟大家分享一下. 定义配置文件信息✦ 有时候我们为了统一管理会把一些变量放到 yml 配置文件 ...
python定义类()中写object和不写的区别
python定义类()中写object和不写的区别这里需要说明一下: python3中,类定义默认继承object,所以写不写没有区别但在python2中,并不是这样所以此内容是针对python ...
Wiew 像写 Android UI 一样写小游戏布局
Wiew 项目地址: https://github.com/onlynight/Wiew 简易微信小游戏view系统以及touch系统.你可以想写Android UI一样写界面布局,处理点击事件. 预 ...

html写三角形,css3怎么写三角形？

html写三角形,css3怎么写三角形？相关推荐

最新文章

热门文章