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