CSS基础-如何用border写三角形？
1.常用的border的单值属性（border指的是边框。）
/*边框样式属性*/
border-style: solid;
/*边框颜色*/
border-color: #06a43a;
/*边框宽度*/
border-width: 10px;其中border-style的属性值有三种：
solid（实线），dashed（虚线为方块），dotted(虚线为圆点)
border-style的属性值-效果图
其中颜色，宽度，样式属性值有四个方向。根据值的不同，对应的方向不同
点击查看详情
border-width:
四个值：上（10px）右（20px） 下（30px） 左（40px）
border-width: 10px 20px 30px 40px;
三个值：上（10px）右（20px） 下（30px） 左（20px）
border-width: 10px 20px 30px ;
两个值：上（10px）右（20px） 下（10px） 左（20px）
border-width: 10px 20px ;
一个值：上下左右全是10px;
border-width: 10px;2.用border边框写三角行
(1)首先查看边框特性，边框交替的位置是斜线
下面是代码，border边框为梯形，点击查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*颜色的分割是梯形，不是长方形。*/
#box{
width:10px;
height:10px;
border: 10px solid ;
border-color: #06a43a deeppink yellowgreen rebeccapurple;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>注意：边框交替处为斜边，是个梯形，用此属性写三角形
（2）开始用边框写三角形，先将梯形变成三角形。
1.设置宽高为0
2.给border-width设置值.
3.边框设置颜色<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*设置成三角形*/
#box1{
width:0;
height:0;
border:40px solid;
border-color: #06a43a deeppink yellowgreen rebeccapurple;
}
</style>
</head>
<body>
<div id="box1"></div><br/>
</body>
</html>
（3）向下三角形
1.设置div高宽为0
2.设置border-width值
3.其余三条边为transparent（透明），视觉效果为下三角。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*设置成向下三角形 transparent：透明 */
#box2{
width:0px;
height: 0px;
border: 40px solid ;
border-color: #06a43a transparent
transparent;
}
</style>
</head>
<body>
<div id="box2"></div>
</body>
</html>
CSS基础-如何用border写三角形？的更多相关文章
- 软件测试必备-前端知识点之css基础及ps的用法
CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. c ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 通过CSS的border绘制三角形
通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...
- CSS用border绘制三角形
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用CSS的border画三角形
用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- CSS基础面试题，快来查漏补缺
本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
随机推荐
- Selenium 2自动化测试实战6（异常）
一.异常 python用异常队形(exception object)来表示异常情况,遇到错误后,会引发异常.如果异常对象并未被处理和捕捉,则程序就会用所谓的回溯(Traceback,一种错误信息)来终 ...
- nfs服务安装部署测试
nfs:网络文件系统作用:某个文件或目录共享,使其它用户可以通过网络访问此共享目录或文件.***特别注意共享的目录权限1.使用nfs需要先安装 yum install -y nfs-utils rpc ...
- PHP加速器eAccelerator安装
程序说明 eAccelerator是一个自由开放源码php加速器,优化和动态内容缓存,提高了php脚本的缓存性能,使得PHP脚本在编译的状态下,对 服务器的开销几乎为零. 它还有对脚本起优化作用,以加 ...
- linux下mongodb程序和c++客户端的编译
2016-4-6 14:17:15 安装前准备:1/ 安装boost库2/ 安装scons程序 方法一:$ git clone git://github.com/mongodb/mongo ...
- unity 角色换装
unity角色换装的关键是更改角色部位上的物体的SkinnedMeshRenderer组件的属性: 更改mesh:mesh决定了部位的物体的外形,是主要的数据. 刷新骨骼:同一个部位下,不同的mesh ...
- linux等 入门思维导图
- appium+python+安卓模拟器环境搭建和启动app实例
本文主要介绍在windows环境下搭建app自动化测试环境,具体步骤如下: 1.下载安卓sdk,网上很多资源 2.下载并安装安卓模拟器,官网上有 删除bin文件下的adb.exe和nox_adb.ex ...
- win10电脑休眠后无法唤醒的解决办法
电脑的休眠功能,为长时间不用的电脑进行了关闭显示.硬盘停转的深度节能模式,不仅节约能源,还保护设备. 但有些时候也会出现一些问题,如休眠后无法唤醒,无法移动鼠标,敲击键盘都无效,最后只能长按电源键来强 ...
- python3 selenuim PC端使用chrome模拟手机进行H5自动化
情况说明:初次在做PC端使用chrome进行H5自动化测试时,以为和app端自动化一样使用click()就可以对按钮进行点击,找了好几天也没有找到解决方法,有些人说是工程问题,有些人是使用微信进行H5 ...
- 【miscellaneous】北斗短报文
北斗系统最大的特色在于有源定位和短报文特色服务,不止解决了中国有无卫星导航系统的问题,还能将短信和导航结合,是中国北斗卫星导航系统的独特发明,也是一大优势. 北斗的短报文功能,在国防.民生和应急救援等 ...