透明的形状,上角有箭头

Question

请看下面的图片.

我想在div我正在处理的可编辑输入框的右上角添加一个箭头.请帮助我如何使用CSS实现这一目标.我不能使用SVG,因为我需要将它作为一个div将表情符号显示为图像.

<div placeholder="Your message" id="Message">
...
</div>

Answer 1

您可以在下面的代码段中执行此操作.用于实现形状的方法如下:

• 主要div元素只有顶部,底部和左边框.右边框无效,因为元素及其箭头必须是透明的.使用透明箭头,如果存在右边框,也会显示.
• 使用skew相对于形状右边缘放置的ed元素来实现右侧的箭头.
• 通过使用另一个伪元素来实现形状的右边界,该伪元素的大小与整个容器的高度相同 - 箭头伪元素的高度.该元件相对于形状的右下方定位.

您可以根据需要调整高度和边界半径.我已经设定了定位,即使父母的身高/宽度的变化也不会影响它.

div.shape {
  position: relative;
  width: 300px;
  height: 100px;
  padding: 4px;
  margin-top: 20px;
  border: 2px solid gray;
  border-right: none; /* not required as the shape needs to be transparent */
  border-radius: 8px; /* not required as the right border is done through pseudo element */
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
div.shape:before {
  position: absolute;
  content: '';
  top: -2px; /* equal to border top of parent - no need to change*/
  right: -6px; /* for positioning - no need to change*/
  height: 15%; /* should be changed depending on height of arrow */
  width: 10%; /* should be changed depending on width of arrow */
  border-top: 2px solid gray;
  border-right: 3px solid gray; /* thicker border because skew makes it thin */

  /* to achieve the arrow like shape */ 
  -webkit-transform-origin: bottom right;
  -webkit-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  transform: skew(-45deg);
}
div.shape:after {
  position: absolute;
  content: '';
  right: -6px; /* for positioning - no need to change*/
  height: 85%; /* height of parent - height of arrow */
  width: 2%; /* no need to change */
  bottom: -2px; /* equal to border bottom of parent - no need to change*/
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;
  border-bottom-right-radius: 8px; /* for producing curve on bottom right */
}

/* Just for demo */

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
  background: -moz-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="shape">
  Lorem Ipsum Dolor Sit Amet...
</div>

可以通过更改定位属性和倾斜方向(从正角度到负角度)将箭头添加到左侧,如下面的代码段所示.

div.shape {
  position: relative;
  width: 300px;
  height: 100px;
  padding: 4px;
  margin-top: 20px;
  margin-left: 20px;
  border: 2px solid gray;
  border-left: none; /* not required as the shape needs to be transparent */
  border-radius: 8px; /* not required as the right border is done through pseudo element */
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
div.shape:before {
  position: absolute;
  content: '';
  top: -2px; /* equal to border top of parent - no need to change*/
  left: -6px; /* for positioning - no need to change*/
  height: 15%; /* should be changed depending on height of arrow */
  width: 10%; /* should be changed depending on width of arrow */
  border-top: 2px solid gray;
  border-left: 3px solid gray; /* thicker border because skew makes it thin */

  /* to achieve the arrow like shape */ 
  -webkit-transform-origin: bottom right;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
}
div.shape:after {
  position: absolute;
  content: '';
  left: -6px; /* for positioning - no need to change*/
  height: 85%; /* height of parent - height of arrow */
  width: 2%; /* no need to change */
  bottom: -2px; /* equal to border bottom of parent - no need to change*/
  border-left: 2px solid gray;
  border-bottom: 2px solid gray;
  border-bottom-left-radius: 8px; /* for producing curve on bottom right */
}

/* Just for demo */

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
  background: -moz-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple);
}

<div class="shape">
  Lorem Ipsum Dolor Sit Amet...
</div>