链接边框和向下三角形透明 [英] Link with border and down triangle transparent

问题描述

我找不到我需要的东西。我有这个代码

 < hgroup id =subheader> 
< h1> lorem ipsum< / h1> 
< h2> ipsum lorem< / h2> 
< a href =＃class =arrow-down>阅读更多< / a> 
< / hgroup> 
  

我想让链接有一个底部有一个向下三角形的边框。但它必须是透明的，因为它在图像前面。可能吗？

解决方案

问题中给出的形状是一个有点复杂的完全透明度，因为箭头的区域切割必须是透明的。因此，通常用于创建这种工具尖端形状的技术不能如此使用。但是，仍然有一种方法使用CSS实现它，它如下：

• 使用父 hgroup 用于顶部，左侧和右侧边界的形状，并添加 border-radius 。


• 使用两个伪元素（：before 和：后），它们与父节点具有相同的高度，但是具有较小的宽度，使得当相对于父节点绝对定位时，它们产生微小的间隙。将 border-bottom 单独添加到这些伪元素。


• 为箭头下拉元素 a ）并使用 rotate（45deg）转换创建箭头，而不是使用边框技巧。变换方法对创建透明箭头非常有帮助。


• 当我们处理变换，三角形等时，位置值需要基于数学定理计算。

< pre class =snippet-code-css lang-css prettyprint-override> * {box-sizing：border-box;} container {height：300px; width：500px; background：url（http://lorempixel.com/500/300/nature/2）; padding：10px;}＃subheader {position：relative; width：400px; height：auto; border：1px solid black; border-bottom：none; border-radius：12px; padding：10px;}。arrow-down {display：inline-block;}。arrow-down：after {position：absolute; content：''; bottom：-10px; / *元素高度的一半* / left：50px; / * some aribitrary position * / height：20px; width：20px; transform：rotate（45deg）;转化起点：50％50％; / *围绕中心旋转，距离左边60px * / border-right：1px solid black; border-bottom：1px solid black;}＃subheader：after {position：absolute; content：''; left：74px; / *箭头中心点+斜边1/2 1/2 * /高度：100％; width：calc（100％ - 74px）; / * 100％ - left * / bottom：0px; border-bottom：1px solid black; border-bottom-right-radius：inherit; / *相同的边界半径作为父* /}＃subheader：before {position：absolute; content：'';高度：100％; width：46px; / *箭头中心点 - 斜边的1/2。* / left：0px; bottom：0px; border-bottom：1px solid black; border-bottom-left-radius：inherit; / *与父级相同的边框半径* /}

  ; div class ='container'> < hgroup id =subheader> < h1> lorem ipsum< / h1> < h2> ipsum lorem< / h2> < a href =＃class =arrow-down>阅读更多< / a> < / hgroup>< / div>  

I can't find what I need. I have this code

<hgroup id="subheader">
        <h1>lorem ipsum</h1>
        <h2>ipsum lorem</h2>
        <a href="#" class="arrow-down">read More</a>
</hgroup>

I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?

解决方案

The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:

• Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
• Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
• Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
• As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.

* {
  box-sizing: border-box;
}
.container {
  height: 300px;
  width: 500px;
  background: url(http://lorempixel.com/500/300/nature/2);
  padding: 10px;
}
#subheader {
  position: relative;
  width: 400px;
  height: auto;
  border: 1px solid black;
  border-bottom: none;
  border-radius: 12px;
  padding: 10px;
}
.arrow-down{
  display: inline-block;
}
.arrow-down:after {
  position: absolute;
  content: '';
  bottom: -10px;  /* half the height of the element */
  left: 50px;  /* some aribitrary position */
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  transform-origin: 50% 50%;  /* rotate around center which is at 60px from left */
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
#subheader:after {
  position: absolute;
  content: '';
  left: 74px;  /* center point of arrow + 1/2 of hypotenuse */
  height: 100%;
  width: calc(100% - 74px);  /* 100% - value of left */
  bottom: 0px;
  border-bottom: 1px solid black;
  border-bottom-right-radius: inherit;  /* same border-radius as parent */
}
#subheader:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 46px;  /* center point of arrow - 1/2 of hypotenuse */
  left: 0px;
  bottom: 0px;
  border-bottom: 1px solid black;
  border-bottom-left-radius: inherit;  /* same border-radius as parent */
}

<div class='container'>
  <hgroup id="subheader">
    <h1>lorem ipsum</h1>
    <h2>ipsum lorem</h2>
    <a href="#" class="arrow-down">Read More</a>
  </hgroup>
</div>

这篇关于链接边框和向下三角形透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！