上期传送门:
css中的选择器
css盒子模型及其实战案例(上)
css盒子模型及其实战案例(下)
css网页布局之浮动及其实战案例(超详细)
css中的定位详解
css中元素的显示与隐藏
我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧
今天总结css三角的知识,网页中一些常见的三角形使用css画出来就行,不必做成图片或者字体图标。
我说的css三角是什么呢,看图
就是图中圈起来的一部分,这部分我们怎么用css实现呢,一张图就知道怎么做了,接下来分享一下
css代码
div{
width:0;
height: 0;
line-height: 0;
font-size: 0;
border-left:10px solid purple ;
border-right:10px solid green ;
border-top:10px solid red ;
border-bottom:10px solid blue ;
}
其实原理就是做一个宽高为零的盒子,将边框宽度设置好,就可以得到任意大小的三角形,其中line-height: 0; font-size: 0;是考虑兼容性的,可以不写,
那么,我们要三角形是不是就很简单了,给其它三边颜色弄透明就可以了,我们可以得到各个方向的三角形。
例如:向上的三角形
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div{
width:0;
height: 0;
line-height: 0;
font-size: 0;
border:10px solid transparent ;
border-bottom:10px solid blue ;
}
style>
head>
<body>
<div>div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box{
position: relative;
width: 200px;
height: 400px;
margin: 50px auto;
background-color:skyblue;
}
.sj{
position: absolute;
right: 50px;
top: -20px; /*向上移动这个正方形的高,三角形底部正好就到了.box盒子上边*/
width:0;
height: 0;
line-height: 0;
font-size: 0;
border:10px solid transparent ;
border-bottom:10px solid skyblue ;
}
style>
head>
<body>
<div class="box">
<div class="sj">div>
div>
body>
html>
css坚持更新好几天了,写博客确实不容易,但我一直在坚持,在巩固自己所学的知识的同时,希望也能帮助到他人,喜欢给个三连支持一下哦!我们下期再见!!!