Link with border and down triangle transparent

Question

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?

Answer 1

Here is a working version of what you're after.

HTML

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

CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.

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/

You will want to hide the DIV that is going to house your content. I added it to the above HTML code.

 style="display:none"

Then you want to call the link on click and toggle the div class tri-down on/off

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

Here is your orignal code.

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

If you dont want to set the opacity if your div, you can also try this below.

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

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>

Answer 3

you can try this one:

 .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

You may need to overlay two images and absolutely position them. Like something along the lines of:

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;}

Like in this pen