使用css向下箭头的边界

Question

我有如下要求。

我可以浏览https://css-tricks.com/snippets/css/css-triangle/网站并生成三角形。我想知道如何将它附加到边框并获得所需的高度10px和宽度为40px的尺寸。

Answer 1

你需要制作你想要制作箭头的子div的父div和position: relative;的{​​{1}}。

制作箭头的主要因素是transform属性。

工作正常。但是这里箭头的大小只是你想要的2倍。

position: absolute;

* {box-sizing: border-box;}
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;}
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 80px; z-index: 2; background-color: #fff;}
.arrow .pin {width: calc(50% + 5px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;}
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}

它的箭头大小为<div class="line"> <div class="arrow"> <div class="pin"> </div> <div class="pin"> </div> </div> </div>。

40px x 10px

* {box-sizing: border-box;}
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;}
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 10px; width: 40px; z-index: 2; background-color: #fff;}
.arrow .pin {width: calc(50% + 3px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;}
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}

Answer 2

这很简单。

步骤1：您为要添加箭头的div提供position: relative;属性。

第2步：添加CSS箭头：<div class="arrow-down"></div>并为其应用position: absolute;属性，以便您可以根据需要进行定位。

所以，如果你有一个带有类框的div，那就是你要做的：

HTML：

<div class="box">

   <div class="arrow-down"></div>
</div>

CSS：

// Arrow at the bottom

.box {
  width: 200px;
  height: 150px;
  background-color:red;
  margin: 50px auto;

  position: relative;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 10px solid #f00;

  position: absolute;
  bottom: -10px;
  left: 80px;
}

这里有一个相同的小提琴：https://jsfiddle.net/t2ne282z/