php怎么弄三角形,css中怎么设置三角形
css中设置三角形的方法:首先创建一个HTML示例文件;然后设置一个span元素为块级元素,并分别设置border的四边都为不同的颜色;最后通过设置上边框和左右边框宽度实现三角形即可。
本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
使用css设置三角形
1.在开发中,有时候会用到一些小三角形来强调或者标记元素,这样以便区分不同的项目,然后把三角形绘制成一个比较明显的颜色,就达到效果了,那怎么才能画出三角形呢,之前我也不清楚,最近看到了有些网页在使用,在进行标记的时候,都是使用的是背景图片进行标记,这样在网页显示的时候,感觉有点生硬,毕竟图片的加载没有css加载那么顺畅
下面看一段代码:这里设置了一个span 元素为块级元素,分别设置border的四边都为不同的颜色:
Document
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px;
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
运行结果:发现四面的边框,居然是这种梯形的结构,如果把梯形上底变为0,不就是我们想要的三角形了么,而且这是使用html 和css做不来的,不存在使用静态页面就可以实行,不存在图片的不连续显示问题;
接下来就是把梯形的上底变为0 了【推荐:《css视频教程》】
上底变为0 很简单,只要把元素的高和宽设置为0就可以了
width:----->0 得到上下两种箭头
height:------->0 得到左右两种箭头
1.当我们想要上箭头的时候,就把元素的左右边框和下边框去掉
2.当我们想要下箭头的时候,就把元素的左右边框和上边框去掉
3.当我们想要左箭头的时候,就把上下边框和右边框去掉
4.当我们想要右箭头的时候,就把上下边框和左边框去掉
想法是好的,试了一下,想要上加箭头:设置css如下:span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
运行结果:发现不行啊,什么都没有
那我们换个方法:既然设置宽度不行,那我们就设置颜色吧,只要把上,左,右边框的颜色设置为透明的,不就可以了么,css 中,刚好有一个设置颜色为透明的值span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red;
border-left-color: blue; */
border-bottom-color: yellow;
/* border-right-color: black; */
}
运行结果:OK,大功告成!!!
设置下箭头:span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
/* border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black; */
}
设置左箭头:span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-bottom-color: transparent;
/* border-left-color: transparent; */
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red; */
border-left-color: blue;
/* border-bottom-color: yellow;
border-right-color: black; */
}
设置右箭头:span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
/* border-right-color: transparent; */
/* border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow; */
border-right-color: black;
}
当然,css 还可写在一起,这样看起来要简单一些:span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
/* 先后设置上右下左的border-color属性都是一样的,需要哪个箭头,再设置哪个方向的颜色属性,这样,最后设置的属性覆盖了前面的属性,就变成箭头了 */
border: 50px solid transparent;
border-top-color: red;
}
以上,是使用html和css两项综合起来设置的箭头,可以不可以再设置简单一点呢?
下面,我采用class 属性来设置箭头,当需要箭头的时候,直接加上这个class 属性就可以,当不想要箭头的时候,去除调这个类就好了
下面来看一个例子:
Document
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
.jindaobox {
position: relative;
width: 980px;
margin: 20px auto;
}
li {
list-style: none;
float: left;
position: relative;
border: 1px solid #eee;
margin-right: 30px;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.active {
border: 1px solid red !important;
}
.active::after {
position: absolute;
content: "";
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: red;
top: 0;
left: 0;
right: 0;
margin: auto;
}
- 飞龙在天
- 紫川
- 封神演义
- 风云第一刀
- 天外飞仙
运行结果:
这样,就实现了使用class 属性控制箭头的方式,当需要选中时,给li 元素加上一个active class 属性即可,当不需要时,就去除active class 属性。
php怎么弄三角形,css中怎么设置三角形相关推荐
- css中如何设置hr的样式?css hr标签多种样式(图文)
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
- HTML和CSS中如何设置中文字体
你是不是也遇到过这个问题:在HTML或CSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题. 用font-family:字体英文名 即可. fon标记是HTML里最常用的文字格式 ...
- html语言字体间距怎么设,css中如何设置字/行间距?
css中如何设置字/行间距?下面本篇文章给大家介绍一下使用css设置字间距和行间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用css设置字间距 letter-spac ...
- Flex4 css中skin设置报错解决
Flex4 css中skin设置 header-background-skin:"MySkin"; 运行时报错: TypeError: Error #1034: 强制转换类型失败: ...
- 彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
- css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
- html5首字母大小写,css中如何设置英文首字母大写
css中可使用text-transform属性来设置英文首字母大写.text-transform属性可控制文本的大小写,只需要给包含英文字母文本的元素设置"text-transform:ca ...
- CSS中如何设置父元素透明度不影响子元素透明度
css中经常会遇到设置了父元素的透明度,后会直接影响到子元素的透明度. 例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明 ...
- html文字段落设置,css中怎么设置段落样式?
段落是文章的基本单位,也是网页的基本单位.段落的放置与效果的显示会影响到页面的布局和风格.CSS样式提供了多种属性,来实现对页面中段落文本的控制. css设置段落样式的方法: 对齐方式通过 text- ...
最新文章
- linux mysql 5.7 配置_linux下mysql5.7的安装配置
- 简述可编程控制器硬件组态及网络通信的核心思想_智能硬件设计报价诚信经营...
- 使用springaop技术面向切面编程
- leetcode题解132-分割回文串 II
- vue-router: $router.push遇到的问题
- SFTP服务的使用!!
- 人脸库对比(百度人脸识别)(Java版)
- 朋友圈加粗字体数字_字体:新游黑体(游ゴシック)重大更新,精巧的日系字体~...
- html让图片变灰色,firefox浏览器中css如何把图片变成灰色?
- html5中歌曲和歌词同步的方法
- 硬盘损坏的解决方法(MBR主引导记录的恢复)
- 当 IDENTITY_INSERT 设置为 OFF 时,不能为表 'WLog' 中的标识列插入显式值。
- python画国际象棋_python用turtle画国际象棋棋盘
- 77、基于STM32单片机的超市餐饮二维码/条形码摄像头识别结账扫码系统设计
- 计算机电脑如何连网,电脑之间如何连网?
- URLOS实战入门—制作LAP网站环境
- 40亿美元,Uber自动驾驶“大甩卖”!明星初创企业Aurora接手,首款产品不做出租车...
- 海思PQ调试相关(一)
- oracle监听程序的配置
- 让自己网站对接google谷歌第三方登录接口详解说明