Связь с границей и треугольником вниз прозрачная

Question

Я не могу найти то, что мне нужно. У меня есть этот код

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

Я хочу, чтобы ссылка имела границу с нижним треугольником внизу. Но он должен быть прозрачным, потому что идет перед изображением. Это возможно?

Answer 1

Форма, указанная в вопросе, является немного сложной для достижения полной прозрачности, поскольку область, обрезанная стрелкой, тоже должна быть прозрачной. Из-за этого методы, которые обычно используются для создания таких подсказок, как формы, не могут использоваться здесь как есть. Тем не менее, есть еще способ добиться этого с помощью CSS, и он заключается в следующем:

• Используйте родителя hgroup для формы с границами сверху, слева и справа и добавить border-radius, Не добавляйте какие-либо границы в нижней части, потому что тогда было бы сложно обрезать пространство для стрелки.
• Используйте два псевдоэлемента (:before а также :after), которые имеют ту же высоту, что и родительский элемент, но имеют меньшую ширину, так что они образуют крошечный зазор при расположении абсолютно по отношению к родительскому элементу. добавлять border-bottom в одиночку к этим псевдоэлементам.
• Добавьте псевдоэлемент для стрелки на элементе стрелки вниз (a) и создайте стрелку, используя rotate(45deg) трансформируется вместо использования граничного трюка. Метод преобразования очень полезен для создания прозрачных стрелок. Поместите эту стрелку снова абсолютно по отношению к родителю.
• Поскольку мы имеем дело с преобразованиями, формами треугольников и т. Д., Значения позиций должны быть рассчитаны на основе теорем математики.

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

Answer 2

Вот рабочая версия того, что вы после.

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 ЗДЕСЬ 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 3

Вам может понадобиться наложить два изображения и расположить их абсолютно. Как что-то вроде:

body{
  padding:2em;
}

#subheader h1{
  font-size:1.5em;
  margin-top:0;
}

#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;

padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#subheader:after 
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

#subheader:before 
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
  z-index: 0;}

Как в этой ручке

Answer 4

Вы можете попробовать это:

 .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