使用css实现铅笔形状（实现箭头形状）

使用css实现一个铅笔（箭头）
思路：
首先使用div画出主体，然后使用伪元素after画三角形，调节到合适的位置即可。

实现三角形的方法：
画三角形的方法是元素的宽高为0，设置border大小颜色，然后将其余三个border设置为透明。
效果如下：

完整代码如下：

<template><section class="arrow"><div class="arrow-wrap"></div></section>
</template><script>
export default {}
</script><style lang="scss" scoped>
// 设置变量不用多处修改
$height: 20px;
.arrow {&-wrap {margin: 0 auto;width: 120px;height: $height * 2;background-color: black;position: relative;&::after {content: '';position: absolute;right: -$height * 2;border: $height solid transparent;border-left: $height solid black;// border-left: $height solid red;}}
}
</style>

使用css实现铅笔形状（实现箭头形状）相关推荐

【CSS】style=“cursor: pointer；“鼠标由箭头形状改为手的形状
代码示例: <img class="head-img" style="cursor: pointer;" src="../../../publi ...
python怎么编写对称图案_python – 无论matplotlib中的箭头角度如何,都使箭头形状对称...
以下代码生成下图.箭头的形状取决于箭头的角度.如何使所有箭头都具有相同的对称形状?我特别要求 Python 3,但欢迎一般的解决方案. import matplotlib.pyplot as plt ...
PS有箭头素材吗？如何用ps制作箭头形状？
在使用ps制作图片的时候,经常会用到形状,在形状里有各种各样的素材,大家都知道ps里有很多素材库,里边有大家需要的各种形状,图片,效果预设素材.素材是可以直接选择进行使用的,比一点一点自己绘制节省了大 ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
OpenCASCADE：形状愈合之形状加工
OpenCASCADE:形状愈合之形状加工使用工作流程 Operators 直接面相同参数 B样条限制分割角曲面到样条贝塞尔拆分连续性拆分封闭面修复差距固定面尺寸固定形状拆分封闭 ...
OpenCASCADE：形状愈合之形状自定义
OpenCASCADE:形状愈合之形状自定义间接表面的转换形状缩放将曲线和曲面转换为 BSpline 将基本曲面转换为旋转曲面将基本曲面转换为 Bspline 曲面获取子形状的修改历史拆除 ...
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...
html select更改箭头样式,下拉列表-select样式css处理，可改变箭头的颜色
下拉列表-select样式css处理,可改变箭头的颜色 2018-11-26 css处理下拉列表 .IN {BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: # ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...

使用css实现铅笔形状（实现箭头形状）

使用css实现铅笔形状（实现箭头形状）相关推荐

最新文章

热门文章