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

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

lorem ipsum

ipsum lorem

read More

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

введите описание изображения здесь

Форма, о которой идет речь, немного сложна для достижения полной прозрачности из-за того, что область, разрезанная стрелкой, также должна быть прозрачной. Из-за этого методы, которые обычно используются для создания таких фигур с подобными инструментами, не могут использоваться как есть. Тем не менее, есть еще способ достичь этого с помощью 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 */ } 
 

lorem ipsum

ipsum lorem

Read More

Вот рабочая версия того, что вам нужно.

HTML

  

CSS — Я ДОБАВЛЯЛ фон img, чтобы показать, что его прозрачный, как вы сказали, что у вас будет образ за ним.

 body { background: #333 url("http://sofru.miximages.com/html/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.

  

Вот ваш код orignal.

 

lorem ipsum

ipsum lorem

read More

Если вы не хотите устанавливать непрозрачность, если ваш 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; } 

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

  .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

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

 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;} того, как 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;} тем 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;} 

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