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

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 и), которые имеют ту же высоту, что и родительская, но меньшая ширина, так что они создают крошечный зазор при позиционировании абсолютно относительно родителя. Добавьте только 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

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

.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 3

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

HTML

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

CSS --- Я ДОБАВЛЕНО фона IMG, чтобы показать, что его прозрачным, как вы сказали, что вы собираетесь быть с изображение позади него.

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" 

Затем вы хотите позвонить по ссылке мыши и переключить класс ДИВ три-вниз вкл/выкл

<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 4

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

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

как в этом pen