透明的形状，上角有箭头

时间：2015-05-03 07:33:34

标签： html css css3 css-shapes curve

请参阅下图。

Desired result

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

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

2 个答案:

答案 0 :(得分：14)

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

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

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<div class="shape">
  Lorem Ipsum Dolor Sit Amet...
</div>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<div class="shape">
  Lorem Ipsum Dolor Sit Amet...
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

过滤器：drop-shadow（）

兼容性为 limited

然而效果非常酷：P

＆＃13;
＆＃13; 
84.196.205.238, 172.23.20.177, 172.23.20.177 - - [05/May/2015:11:48:15 +0200] 0 www.sudinfo.be "GET /sites/default/files/imagecache/pagallery_450x300/552495393_google_street_view HTTP/1.1" 200 32620 "http://www.sudinfo.be/247263/article/culture/medias/2011-11-23/google-street-view-en%C2%A0belgique-comment-trouver-votre-maison" "Mozilla/5.0 (Linux; U; Android 4.2.2; nl-be; GT-P3110 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30"
^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@efault/files/imagecache/pagallery_450x300/2015/01/13/1554554859_B974505865Z.1_20150113094316_000_GVR3PDRHQ.1-0.jpg HTTP/1.1" 200 26033 "http://www.bing.com/images/search?q=leonardo+dicaprio+Met+gala&id=06B1C7410D6458C6A698AC09F3F8C6B7915BFFDE&FORM=IQFRBA" "Mozilla/5.0 (iPad; CPU OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53"
＆＃13; 
.inputcontainer {
  display: inline-block;
  position: relative;
  filter: drop-shadow(0px 0px 5px black);
  -webkit-filter: drop-shadow(0px 0px 1px black);
}
.input {
  display: inline-block;
  border: none;
  border-radius: 10px;
  border-top-right-radius: 0px;
  width: 280px;
  height: 50px;
  background-color: white;
  padding-left: 20px;
  font-size: 20px;
}
.input:focus {
  outline: none;
}
.arrow {
  position: absolute;
  display: inline-block;
  top: 0;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: white;
  transform: skew(-45deg);
  z-index: -1;
}
＆＃13;
＆＃13;
＆＃13;

箱阴影：

此处兼容性为 a lot better

＆＃13;
＆＃13; 
<div class="inputcontainer">
  <input type="text" class="input" placeholder="Your message"/>
  <div class="arrow"></div>
</div>
＆＃13; 
.inputcontainer {
  display: inline-block;
  position: relative;
  filter: drop-shadow(0px 0px 5px black);
}
.input {
  display: inline-block;
  border: none;
  border-radius: 10px;
  border-top-right-radius: 0px;
  width: 280px;
  height: 50px;
  background-color: white;
  padding-left: 20px;
  font-size: 20px;
  box-shadow: 0px 0px 0px 2px gray;
}
.input:focus {
  outline: none;
}
.arrow {
  position: absolute;
  display: inline-block;
  top: 0;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: white;
  transform: skew(-45deg);
  box-shadow: 2px -2px 0px 0px gray;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题