与透明中心的箭头的边界 [英] Border with a transparent centred arrow

查看：212
本文介绍了与透明中心的箭头的边界的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用下边框（具有向下箭头）来风格化div。 div将有一个图像，并且不应该有一个顶部，右边或左边框。向下箭头的填充应该与div或透明相同。



我已经能够使用代码大部分工作



< pre class =snippet-code-css lang-css prettyprint-override> .hero {position：relative;背景颜色：黄色; height：320px！重要; width：100％！important; border-bottom：1px solid red;}。hero：after {content：''; position：absolute; top：100％;左：50％; margin-left：-50px; width：0; height：0; border-top：solid 50px＃e15915; border-left：solid 50px transparent; border-right：solid 50px transparent;} 

 < div class =hero>< / div>



这个小提琴： http://jsfiddle.net/alisamii/tjep3h8t/



无论我尝试做什么掏空箭头或者导致一个无边框的div（所以它有一个黄色的填充，但没有任何边的边框）



任何帮助？

解决方案

使用CSS3来实现这一点。一个是在伪元素上使用 skewX ，而另一个在伪元素上使用 rotate 。



使用Skew：



此方法是根据 此的 web-tiki's 线程。它基本上使用两个伪元素（具有大约50％的容器宽度），其沿相反方向倾斜并且适当地定位以到达箭头形状。形状具有边界，其中背景被设置为透明，意味着伪元素将产生底部边界+向下箭头效果。在此示例中，箭头填充将始终为透明（或正文颜色）。



  body {background：rgb（245，242，242）;}。bordered {position：relative; height：200px; width：200px; margin：10px; line-height：200px;}。bordered：after，.bordered：before {position：absolute; content：''; height：8px; width：50％; bottom：0px;}。bordered：before {left：0px; border-top：1px solid gray; border-right：1px solid gray; transform-origin：left bottom; transform：skewX（45deg）;}。bordered：after {right：0px; border-top：1px solid gray; border-left：1px solid gray; transform-origin：right bottom; transform：skewX（-45deg）;}。bordered img {width：150px; padding：25px; vertical-align：middle;} / *只是为演示* /。bordered {transition：all 1s; text-align：center;}。bordered：hover {height：250px; width：250px; line-height：250px;}  

 库仅包含以避免浏览器前缀 - >< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script> < div class =bordered> < img src =http://i.imgur.com/0Xqum3A.png/>< / div>



>



下面的方法会产生一个透明的三角形，使得页面的背景通过三角形切口被看到。



  body {background：rgb（245，242，242）;}。 height：200px; width：200px; margin：10px; background：rgb（200，200，200）; background-clip：content-box; line-height：200px; overflow：hidden;}。bordered.top {padding-top：8px;}。bordered.bottom {padding-bottom：8px;}。bordered：after，.bordered：before {position：absolute; content：''; height：8px; width：50％; background：inherit;}。bordered.top:after,.bordered.top:before {top：0px;}。bordered.bottom：after，.bordered.bottom：before {bottom：0px;}。bordered：before {left： 0px; border-right：1px solid gray;}。bordered.top :before {border-top：1px solid gray; transform-origin：left bottom; transform：skewX（45deg）;}。bordered.bottom：before {border-bottom：1px solid gray; transform-origin：left top; transform：skewX（-45deg）;}。bordered：after {right：0px; border-left：1px solid gray;}。bordered.top：after {border-top：1px solid gray; transform-origin：right bottom; transform：skewX（-45deg）;}。bordered.bottom：after {border-bottom：1px solid gray; transform-origin：right top; transform：skewX（45deg）;}。bordered img {width：150px; padding：25px; vertical-align：middle;} / *仅用于演示* / div {display：inline-block;}  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script> < div class =bordered top> < img src =http://i.imgur.com/0Xqum3A.png/>< / div>< div class =bordered bottom> < img src =http://i.imgur.com/0Xqum3A.png/>< / div>





使用旋转：



- 元素（旋转45度）以实现向下箭头效果，然后放置在 div 底部的 border $ c>。在该方法中，伪元素的 background 被设置为与包含它的 div 相同的颜色。 （注意：在此示例中，图片和 div 有不同的填充颜色。）



  body {background：lightgray;}。 width：200px;位置：相对; margin：10px; line-height：200px;}。color img {vertical-align：middle; width：150px; padding：25px;}。colored {background：yellow; border-bottom：1px solid gray;}。colored：after {height：10px; width：10px; position：absolute; content：'';背景：黄色; border：1px solid gray; border-top-width：0px; border-left-width：0px; transform：rotate（45deg）; bottom：-6px; left：calc（50％ -  4px）;} / *只是用于demo * /。colored {text-align：center; transition：all 1s;}。colored：hover {height：250px; width：250px; line-height：250px;}  

 库仅包含以避免前缀 - >< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< ; div class =colored> < img src =http://i.imgur.com/0Xqum3A.png/>< / div>



>


I am trying to style a div with a bottom-border that has a downward-pointing arrow. The div will have an image in it, and should not have a top, right or left border. The fill of the downward-pointing arrow should be either the same as the div or transparent.

I have been able to get it to work for the most part using the code below:

.hero {
  position: relative;
  background-color: yellow;
  height: 320px !important;
  width: 100% !important;
  border-bottom: 1px solid red;
}
.hero:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #e15915;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

<div class="hero"></div>

See this fiddle: http://jsfiddle.net/alisamii/tjep3h8t/

Whatever I try to do to "hollow-out" the arrow either results in a borderless div (so it has a fill of yellow but no border on any side) or in a border that goes around the whole div.

Any help?

解决方案

There are two methods to achieve this using CSS3. One is using skewX on pseudo-elements while the other is using rotate on pseudo-elements. Both the methods are also responsive.

Using Skew:

This method is adapted from web-tiki's answer in this thread. It basically uses two pseudo-elements (with roughly 50% width of the container) that are skewed in opposite directions and positioned appropriately to arrive at the arrow shape. The shapes have borders where as the background is set to transparent meaning the pseudo-elements would produce a bottom border + downward arrow effect. The arrow fill would always be transparent (or body color) in this sample.

body {
  background: rgb(245, 242, 242);
}
.bordered {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
  line-height: 200px;
}
.bordered:after,
.bordered:before {
  position: absolute;
  content: ' ';
  height: 8px;
  width: 50%;
  bottom: 0px;
}
.bordered:before {
  left: 0px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  transform-origin: left bottom;
  transform: skewX(45deg);
}
.bordered:after {
  right: 0px;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  transform-origin: right bottom;
  transform: skewX(-45deg);
}
.bordered img {
  width: 150px;
  padding: 25px;
  vertical-align: middle;
}
/* Just for demo */

.bordered {
  transition: all 1s;
  text-align: center;
}
.bordered:hover {
  height: 250px;
  width: 250px;
  line-height: 250px;
}

<!-- library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="bordered">
  <img src="http://i.imgur.com/0Xqum3A.png" />
</div>

The below method would produce a transparent triangle such that the page's background is seen through the triangular cut.

body {
  background: rgb(245, 242, 242);
}
.bordered {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 10px;
  background: rgb(200, 200, 200);
  background-clip: content-box;
  line-height: 200px;
  overflow: hidden;
}
.bordered.top {
  padding-top: 8px;
}
.bordered.bottom {
  padding-bottom: 8px;
}
.bordered:after,
.bordered:before {
  position: absolute;
  content: ' ';
  height: 8px;
  width: 50%;
  background: inherit;
}
.bordered.top:after,
.bordered.top:before {
  top: 0px;
}
.bordered.bottom:after,
.bordered.bottom:before {
  bottom: 0px;
}
.bordered:before {
  left: 0px;
  border-right: 1px solid gray;
}
.bordered.top:before {
  border-top: 1px solid gray;
  transform-origin: left bottom;
  transform: skewX(45deg);
}
.bordered.bottom:before {
  border-bottom: 1px solid gray;
  transform-origin: left top;
  transform: skewX(-45deg);
}
.bordered:after {
  right: 0px;
  border-left: 1px solid gray;
}
.bordered.top:after {
  border-top: 1px solid gray;
  transform-origin: right bottom;
  transform: skewX(-45deg);
}
.bordered.bottom:after {
  border-bottom: 1px solid gray;
  transform-origin: right top;
  transform: skewX(45deg);
}
.bordered img {
  width: 150px;
  padding: 25px;
  vertical-align: middle;
}

/* Just for demo */

div{
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered top">
  <img src="http://i.imgur.com/0Xqum3A.png" />
</div>

<div class="bordered bottom">
  <img src="http://i.imgur.com/0Xqum3A.png" />
</div>

Using Rotate:

This method uses a rotated pseudo-element (rotated by 45 degrees) to achieve the downward arrow effect and is then placed on top of the bottom border of the div. In this method, the background of the pseudo-element is set to the same color as the div containing it. (Note: In this sample the image and div have different fill colors.)

body {
  background: lightgray;
}
.colored {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 10px;
  line-height: 200px;
}
.colored img {
  vertical-align: middle;
  width: 150px;
  padding: 25px;
}
.colored {
  background: yellow;
  border-bottom: 1px solid gray;
}
.colored:after {
  height: 10px;
  width: 10px;
  position: absolute;
  content: '';
  background: yellow;
  border: 1px solid gray;
  border-top-width: 0px;
  border-left-width: 0px;
  transform: rotate(45deg);
  bottom: -6px;
  left: calc(50% - 4px);
}

/* Just for demo */

.colored{
  text-align: center;
  transition: all 1s;
}
.colored:hover{
  height: 250px;
  width: 250px;
  line-height: 250px;
}

<!-- library included only to avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="colored">
  <img src="http://i.imgur.com/0Xqum3A.png" />
</div>

这篇关于与透明中心的箭头的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆