html中左三角怎么写,css3三角形怎么写?
大家在浏览web网页的时候经常看到有各种各样的图形,比如圆形,正方形,长方形,三角形等,下面我们来看一下使用css设置三角形的方法。
CSS3三角形实现原理
在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color:transparent。同理background-color:transparent可以设置背景为透明。
三角形8种分类
我们根据三角形的位置分为8种:triangle up,triangle down,triangle left,triangle right,triangle top left,triangle top right,triangle bottom left和triangle bottom right。
8种三角形实现实例:
1、triangle up 上三角形#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}
2、triangle down 下三角形#triangle-down{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid black;
}
3、triangle left 左三角形#triangle-left{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid black;
}
4、triangle right 右三角形#triangle-right{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid black;
}
5、triangle top left 左上三角形#triangle-topleft{
width:0;
height:0;
border-top:100px solid black;
border-right:100px solid transparent;
}
6、triangle top right 右上三角形#triangle-topright{
width:0;
height:0;
border-top:100px solid black;
border-left:100px solid transparent;
}
7、triangle bottom left 左下三角形#triangle-bottomleft{
width:0;
height:0;
border-bottom:100px solid black;
border-right:100px solid transparent;
}
8、triangle bottom right 右下三角形#triangle-bottomright{
width:0;
height:0;
border-bottom:100px solid black;
border-left:100px solid transparent;
}
html中左三角怎么写,css3三角形怎么写?相关推荐
- python中ifelse语句怎么写_pythonifelse语句怎么写
2020-09-07阅读(7) 本文主要为您介绍css3三角形怎么写,内容包括css3怎么写三角形支持ie8,如何用CSS写一个三角形,怎么利用CSS3绘制三角形.1.可以用css3的border-r ...
- css3 伪类写小三角,详解css如何利用 :before :after 写小三角形
之前写的三角形一直在同一个颜色,没有边框的样式.如下: CSS代码如下: .tri-up{width: 0;height:0;border-left:20px solid transparent;bo ...
- css3三角形兼容_利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 经典算法大全51例——3.杨辉三角(又称帕斯卡三角形)
经典算法大全51例--3.杨辉三角(又称帕斯卡三角形) 算法目录合集 地址 说明 题目以及个人题解 原理分析 思路一--纵向寻踪 思路二--横向寻踪 代码实现--Java 方式一--纵向寻踪 方式二- ...
- html渐变色CSS3 渐变,如何实现css3渐变色,css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
- CSS样式写出三角形
CSS样式写出三角形的样式,在这里只举出两个例子,三角形朝上和三角形朝下,还有左上,左下,右上,右下.有需要或者感兴趣的可以自己调一下代码.调border的top.bottom.left.right的 ...
- 清华“差生”10年奋斗经历,只写事业,不写女人
清华"差生"10年奋斗经历,只写事业,不写女人.作者从2004年本科毕业写到2012年,近10年的奋斗经历.反正一字一句看完后,各种反省各种彻悟.不要老去抱怨别人"天时地 ...
- 写时复制,写时拷贝,写时分裂,Copy on write
2019独角兽企业重金招聘Python工程师标准>>> 写时复制,写时拷贝,写时分裂 (Copy-on-write,简称COW)是计算机资源管理方面的一种优化技术,有着广泛的应用,比 ...
- 同事说,我写Java代码像写诗
文章来源:http://33h.co/kntu3 前几天空闲时间写了一遍关于平时自己写代码的一些习惯,这里跟大家分享一下. 定义配置文件信息✦ 有时候我们为了统一管理会把一些变量放到 yml 配置文件 ...
- python定义类()中写object和不写的区别
python定义类()中写object和不写的区别 这里需要说明一下: python3中,类定义默认继承object,所以写不写没有区别 但在python2中,并不是这样 所以此内容是针对python ...
最新文章
- 一文带你读懂Python的5大特点与8大应用方向!
- 【十五分钟Talkshow】工作流及工作流框架、服务
- weblogic0638_Java安全之Weblogic 2016-0638分析
- Markdown 图标 快捷键
- wso2 esb_WSO2 ESB的一种消息传递方式
- C语言解析http请求表单内容
- hiho图的联通性(自留)
- [css] 使用css3做一个魔方旋转的效果
- boost学习之BOOST_FOREACH
- sql server死锁_了解SQL Server中的死锁图的XML描述
- springboot配置文件加载顺序_「SpringBoot系列」配置文件加载优先级解析
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
- socket编程之TCP/UDP
- 用python计算数据的方差_用python求数据表中数据的均值与方差
- 【Unity3D】使用Unity做一个简单的游戏,roll_a_ball,第一步创建游戏。
- Mapped Statements collection already contains value for com.bai.dao.Userdao.UserByID
- 小白Mybatis学习笔记,mybatis入门
- 笔记一:领导力是什么
- 道里云公司网络虚拟化架构NVI技术开放源代码--序言
- 第七篇 nacos 注册中心
热门文章
- win7 网络不显示电脑连接到服务器,Win7在网上邻居上看不到别的电脑怎么办?
- android的 root权限
- 怎么去除脸上的黄褐斑
- 克鲁伊夫:巴萨孤独求败 无巨星照样演完美风暴(2009-11-26)
- bc vc投资_天使投资、VC 以及 PE 的区别是什么?
- StringJoiner拼接字符串(使用以及源码解析)
- matlab中muw,matlab – 获取属于凸包的点
- 学习笔记(一)---Docker概述
- 第十六届—振兴杯计算机网络管理员决赛模拟题
- 计算机光驱无法启用,光驱提示:无法访问G:\函数不正确解决方法