透明形状，带上角的箭头

Question

我想在的右上角添加一个箭头，将div其视为
可编辑输入框。请帮助我如何使用CSS实现此目标。我
无法使用SVG，因为我需要使用SVGdiv来将表情符号显示为图像
。

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