首页

Appearance

常见的画对勾的几种方法 ​

方法 1：借助元素的两条边 ​

示例

示例代码

html
<style>
  .arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
  }
</style>

<span class="arrow"></span>

扩展

可以通过修改width和height的值，来改变对勾的样式。

css
.arrow {
  display: inline-block;
  width: 10px; 
  height: 5px; 
  border: 1px solid #000;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

方法 2：借助伪元素 ​

短的那条线借助元素设置宽和高，然后旋转角度，另外一条长的边，借助伪元素插入。

示例

示例代码

html
<style>
  .arrow {
    display: inline-block;
    width: 7px;
    height: 1px;
    background: #000;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    transform: rotate(45deg);
  }
  .arrow::after {
    content: '';
    display: block;
    width: 15px;
    height: 1px;
    background: #000;
    transform: rotate(-90deg) translateY(-50%) translateX(50%);
  }
</style>

<span class="arrow"></span>

实用案例 ​

隐私条款勾选框

试一试

  1. 定义一个元素，并绑定点击事件。
html
<div class="agreen-policy" :class="{ 'checked': isChoosedPolicy }" @click="agreenPolicy"></div>
  1. 处理点击事件。
vue
<script setup>
import { ref } from 'vue'
const isChoosedPolicy = ref(false)
const agreenPolicy = () => {
  isChoosedPolicy.value = !isChoosedPolicy.value
}
</script>
  1. 应用样式。
scss
.agreen-policy {
  background: #fff;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #b3b3b3;
  box-sizing: border-box;
  border-radius: 4px;
  &.checked {
    background: #0b56a4;
    border-color: transparent;
  }
  &.checked::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 7px;
    height: 12px;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
  }
}