如何通过CSS绘制三角形和小箭头

1. 绘制三角形的作用,主要是提供指示性,如下图

 2. 那么如何画出三角形呢?我们先看下border的用法

<div class="box"></div>
 .box{
        box-sizing: border-box;
        height: 200px;
        width: 200px;
        border-left: 80px solid red;
        border-right: 80px solid beige;
        border-top: 80px solid green;
        border-bottom: 80px solid yellow;
      }

 效果如图所示,border为1是,看起来是单纯的直线,如果border的长度过长,就是就会形成如下的情况。如果你把上面的css边框都由80px调成100px。就会形成如下的效果。

 .box{
        box-sizing: border-box;
        height: 200px;
        width: 200px;
        border-left: 100px solid red;
        border-right: 100px solid beige;
        border-top: 100px solid green;
        border-bottom: 100px solid yellow;
      }

 这样我们就得到了4个三角形。那我们如果只想得到其中的1个三角形呢,我们就把其他三个border隐藏掉就好了。

3. 画出三角形

<div class="traingle bottom"></div>
 .traingle{
    display: inline-block;
    border: solid 50px transparent;  /*隐藏边框颜色 控制三角形的长边边长*/
 }
 .traingle.bottom{
    border-top-color: green ;  /* top botttom left right 控制三角形方向 */
 }

 4. 画出如上图的气泡提示词效果(口诀:内部元素绝对定位,外部元素相对定位)

 body{
      background-color: #f0f0f0;
    }
    .box{
      box-sizing: border-box;
      width: 200px;
      height: 50px;
      line-height: 30px;
      position: relative;
      padding: 10px;
      background-color: white;
      border-radius: 8px;
    }
    .triangle{
      position: absolute;
      bottom: -30px;
      left: 10px;
      display: inline-block;
      border: 15px solid transparent;
    }
    .triangle.bottom {
      border-top-color: white;
    }
 <div class="box">
        我是气泡框
        <div class="triangle bottom"></div>
    </div>

5. 绘制小箭头

只需要使用after再画一个白色三角形,然后再原来绿色三角形的基础上向右偏移即可。 

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}
	<div class="box">
		<div class="arrow"></div>
	</div>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值