使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。
<style>
.dom{
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: red green blue brown;
}
</style>
<!--宽度为100px-->
<div class="dom"></div>
效果如下:
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
/*或者border-color: transparent transparent red;*/
}
</style>
<div class="dom"></div>
效果:
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent blue transparent;
/*或者border-color:blue transparent transparent*/
}
</style>
<div class="dom"></div>
效果:
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent green transparent transparent;
}
</style>
<div class="dom"></div>
效果:
<style>
.dom{
width: 0px;
height: 0px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent transparent brown;
}
</style>
<div class="dom"></div>
效果:
<style>
.dom{
width: 0px;
height: 0px;
border-width:0 40px 40px;
border-style: solid;
border-color: transparent transparent #333;
position: relative;
}
.dom:after{
content:"";
display: block;
width: 0px;
height: 0px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent red;
position: absolute;
top:1px;
left:-38px;
}
</style>
<div class="dom"></div>
效果:
纯CSS实现自适应浏览器宽度的正方形有以下三种方法:CSS3 vw 单位、设置垂直方向的padding撑开容器、利用伪元素的 margin(padding)-top 撑开容器
使用两个半圆做角度拼接。比如想绘制一个缺口朝右,缺口弧度30度角的扇形,那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。
css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形,三角形等知识点,由于IE9以上才支持圆角,暂时不考虑兼容问题
现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能, 比如用户鼠标移动画箭头,画圈圈,高光选中文本等等。
实现方式是通过border-radius这个属性;border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值,还能接收百分比的值。百分比的值会基于元素的尺寸进行解析,宽是水平半径的解析,高是垂直半径的解析。
在网页制作中,很多时候都会有箭头的情况,我们可以使用css来绘制箭头,css是如何绘制箭头的呢?下面我们来看一下使用css绘制箭头的方法。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!