1) rotate + skew
原理:箭头的两边就是一个透明div的border,通过skew扭转成需要的角度,再通过rotate把箭头摆正。
<div id="arrow">
<span></span>
</div>
#arrow{
-webkit-transform: rotate(-51deg);
width: 35px;
height: 35px;
}
#arrow span{
display: block;
-webkit-transform: skew(-15deg);
width: 20px;
height: 20px;
background: transparent;
border: solid 4px black;
border-left: 0;
border-top: 0;
}
2) :before + :after + rotate
原理:由:before与:after各生产一条边,通过rotate旋转出需要的角度,关键是旋转点(-webkit-transform-origin)。
<div id="arrow_2"></div>
#arrow_2{
position: relative;
}
#arrow_2::before, #arrow_2::after{
position: absolute;
content: "";
width: 10px;
height: 80px;
background: #f66;
}
#arrow_2::before{
left: 0;
-webkit-transform: rotate(-35deg);
-webkit-transform-origin: 100% 100%;
}
#arrow_2::after{
left: 10px;
-webkit-transform: rotate(-145deg);
-webkit-transform-origin: 0 100%;
}
分享到:
相关推荐
直角坐标与非直角坐标测量机及其发展,庞学慧,张治民,分析和比较了直角坐标与各种非直角坐标测量机各自的特点;指出直角坐标测量机将长期占主导地位,非直角坐标测量机是其重要的补充
线条控制已经做了封装 var line = new Line(); 挂号的四个值代表x1、y1、x2、...x2、y2表示结束点坐标(有箭头的一边) line.drawArrowLine(10, 10, 10, 100); 删除线条 line.remove() 设置颜色 line.setColor(newColor)
弧形非直角翼缘板H型钢制作工法.doc
该资源包的执行效果查看地址:...“地图之家”专栏中的“29.(cesium篇)cesium态势标绘-直线箭头编辑修改”。如下载有问题,可联系博主。 解压密码:cesium
这是我自己原创的画直角坐标系的小程序,这个直角坐标系可以移动原点,也可以缩放直角坐标系的刻度,希望对于刚开始学习c#的同学有所帮助,呵呵!
使用Python实现大地坐标与空间直角坐标间的转换,使用CGCS2000国家大地坐标系的椭球数据。 功能为:①已知某点的大地坐标(L,B,H),求该点相应的大地空间直角坐标(X,Y,Z);②已知某点的大地空间直角坐标(X,...
主要介绍了C语言实现直角坐标转换为极坐标的方法,涉及C语言进行三角函数与数值运算相关操作技巧,需要的朋友可以参考下
基于matlab软件,可将经纬度坐标转换成空间直角坐标。内含WGS84参考椭球参数,可通过输入自己的经纬度坐标,实现三维空间直角坐标的转换。
WGS84BJ54两种空间直角坐标系的转换,由空间直角坐标到大地坐标的转换.zip
画布建立二维直角坐标系,添加一个标记在(0,0)点,可控制标记移动,可自由二次开发,压缩包内有有用法,不会的可以私聊我
大地测量中空间直角坐标和大地坐标之间的转换,C++实现,实现良好封装,仅供参考
纯C语言编写源码,可直接运行,包含4种椭球参数
基于CORDIC算法的直角坐标与球面坐标变换电路的FPGA实现.pdf
Win7 直角质感透明清新玻璃主题是一款非常简洁大方而又有质感的直角玻璃主题,主题设计的非常精美漂亮,如果你是一个喜爱直角主题桌面的童鞋,这款Win7 直角质感透明清新玻璃主题或许适合你哦。 首先确认您的系统...
经纬度和直角坐标换算工具,有三分带和六分带,很好的转换工具。
利用MATLAB将图像的极坐标转为直角坐标,该程序对应用于图像匹配的旋转角度的确定具有关键作用
简单的图形设计,最基本的要求,最简单的代码,实现最简单功能。
空间直角坐标转换采用 Bursa七参数模型。当旋转角较小时,对模型采取近似处理从而简化计算,但是这种方法不适用于旋转角较大情况下的参数求解。本文采取的方法是对模型采取相似变换的方式求取参数的解析解,与迭代...