Question

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

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

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

Answer 1

以下是您之后的工作版本。

HTML

<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>

CSS ---我添加了一个背景图片，表明它是透明的，因为你说你将会有一个背后的图像。

body {
    background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg")  fixed;
} 
.tri-down {

    /* Styling block element, not required */
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
    width: 75%;
    border: 1px solid #999;
    background: #f3f3f3;
    border-radius:5px;
    opacity: 0.5;
    /*you may want to set the z-index level of your tri-down box.
    z-index: 100;
    */
  }

  /* Required for Down Triangle */
  .tri-down:before, .tri-down:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
  }

  /* Stroke */
  .tri-down:before {
    bottom: -16px;
    left: 21px;

    /* If 1px darken stroke slightly */
    border-top-color: #777;
    border-width: 16px;
  }

  /* Fill */
  .tri-down:after {
    bottom: -15px;
    left: 22px;
    border-top-color: #f3f3f3;
    border-width: 15px;
  }

JSFIDDLE HERE http://jsfiddle.net/LZoesch/dk43s2qz/

您需要隐藏容纳内容的DIV。我将其添加到上面的HTML代码中。

 style="display:none"

然后你想在点击时调用链接并打开/关闭div类三开关

<script type="text/javascript">
$(function(){
  $('#').click(function(){
     $('#').toggle();
     $('#').toggle();
  });
});
</script>

这是您的原始代码。

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

如果您不想设置不透明度，如果您的div，您也可以尝试以下。

body {
    background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
    font-family: sans-serif; 
    text-align: center;
}
body > div { 
    color: #000; 
    margin: 50px;
    padding: 15px;
    position: relative; 
}
.tri-down { 
    border: 5px solid #000;
    content: ""; 
    position: absolute; 

}

Answer 2

由于箭头切割的区域也必须是透明的，所以给出的形状有点复杂，完全透明。因此，通常用于创建这种类似工具尖端的形状的技术不能在这里使用。但是，仍有一种方法可以使用CSS实现它，它如下：

将父hgroup用于顶部，左侧和右侧有边框的形状，然后添加border-radius。不要在底部添加任何边框，因为那样削减箭头的空间会非常困难。
使用两个伪元素（:before和:after），它们具有与父级相同的高度，但宽度较小，以便在相对于父级绝对定位时产生微小间隙。仅将border-bottom添加到这些伪元素。
为箭头向下元素（a）上的箭头添加伪元素，并使用rotate(45deg)变换创建箭头，而不是使用边框技巧。变换方法对于创建透明箭头非常有用。相对于父母，绝对再次定位此箭头。
当我们处理变换，三角形等时，需要根据数学定理计算位置值。

＆＃13;

* {
  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 */
}

＆＃13;

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

＆＃13;

Answer 3

你可以尝试这个：

 .tri-down {

        /* Styling block element, not required */
        position: relative;
        margin-bottom: 2em;
        padding: 1em;
        border: 1px solid #999;
        background: #f3f3f3;
 border-radius:5px;
      }

      /* Required for Down Triangle */
      .tri-down:before, .tri-down:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-bottom: 0;
      }

      /* Stroke */
      .tri-down:before {
        bottom: -16px;
        left: 21px;

        /* If 1px darken stroke slightly */
        border-top-color: #777;
        border-width: 16px;
      }

      /* Fill */
      .tri-down:after {
        bottom: -15px;
        left: 22px;
        border-top-color: #f3f3f3;
        border-width: 15px;
      }

DEMO

Answer 4

您可能需要覆盖两个图像并绝对定位它们。喜欢以下内容：

vtk

就像这个pen

一样

链接边框和下三角形透明

4 个答案: