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

最新推荐文章于 2024-06-22 09:56:05 发布

前端三脚猫

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： css html vue.js html5

本文链接：https://blog.csdn.net/weixin_43911758/article/details/114406685

版权

前端专栏收录该内容

29 篇文章 3 订阅

订阅专栏

使用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>