Is it possible to create arrow with transparent container with border?

Question

Is it possible to create something like this:

enter image description here

Because now I have something like this: https://jsfiddle.net/38kjb5us/

body{
  background-image: url('//ssl.gstatic.com/gb/images/v1_76783e20.png');
}
.dropdown-content{
 display: inline-block;
 padding: 18px 14px;
 border: 1px solid #ffffff;
 min-width: 160px;
 position: relative;
 box-shadow: 0 0 10px #000000;
 margin: 15px;
}
.dropdown-content:before{
    position: absolute;
    content: "";
    border: 1px solid #ffffff;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #ffffff transparent;
    top: -12px;
 }

<div class="dropdown-content"></div>

and I have no idea how to add an arrow with a border to the transparent container(((

Is it possible? If yes, then how?

Tawfiq abu Halawah · Accepted Answer

Check this solution using only DIVs and Css

the solution below you can change the width and the height and position of the arrow container

https://plnkr.co/edit/nXRNr7bbdMSaxBKa6h4J?p=preview

and this codepen to add shadow http://codepen.io/tawfiqin/pen/JKYyMK

html and css

.image-cont{
  height:400px;
  background:red;
  background:url('https://mir-s3-cdn-cf.behance.net/project_modules/hd/94430a33978280.56bf480f1ad36.jpg');
}

.arrow-container{
  position:absolute;
  width:360px;
  height:170px;
  background:rgba(255,255,255,0.0);
  top:140px;
  left:160px;
  color:white;
}

.arrow-content{
  height:100%;
  overflow:auto;
  background:rgba(255,255,255,0.0);
}
.arrow{
  position:absolute;
  width:30px;
  height:30px;
  border-left:1px solid white;
  border-top:1px solid white;
  transform:rotate(45deg);
  top:-15px;
  left:40px;
}

.top-border{
  position:absolute;
  width:calc(100% + 2px) ;
  height:1px;
  /*Thanks to Ahmad Shadeed @shadeed user at codepen*/
  background: linear-gradient(to right, #fff 34px, transparent 0, transparent 76px, #fff 0, #fff 100%);

}
.bottom-section{
  width:100%;
  border:1px solid white;
  border-top:none;
  height:100%;
  top:1px;
  position:absolute;
  pointer-events:none;
}

.cont2{
  width:200px;
  height:100px;
  top:350px;

}

.cont3{
  width:auto;
  max-width:300px;
  height:100px;
  top:350px;
  left:400px;

}

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="image-cont">
        <div class="arrow-container">
          <div class="arrow"></div>
          <div class="top-border"></div>
          <div class="bottom-section"></div>
          <div><h2 style="margin-left:10px;">your content</h2></div>
        </div>

         <div class="arrow-container cont2">
          <div class="arrow"></div>
          <div class="top-border"></div>
          <div class="bottom-section"></div>
          <div class="arrow-content">
            <h2 style="margin-left:10px;">your content</h2>
            <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </div>
        </div>

        <div class="arrow-container cont3">
          <div class="arrow"></div>
          <div class="top-border"></div>
          <div class="bottom-section"></div>
          <div class="arrow-content">
            <h2 style="margin-left:10px;">Dynamic Width</h2>
            <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </div>
        </div>
    </div>

  </body>

</html>

also you do it using SVG

thepio · Answer

Here is a ultra simple pure CSS solution with only one single div. Arrow is created using pseudo-elements :before and :after.

body {
  background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg') top center no-repeat;
  background-size: cover;
  padding: 50px;
  overflow: visible;
}
.box {
  padding: 15px;
  color: red;
  position: relative;
  width: 300px;
  height:auto;
  max-width: 100%;
  margin: 0 auto 30px auto;
  background-color: transparent;
  border: 1px solid #FFFFFF;
  border-top: none;
  overflow: visible;
}

.box.second {
  width: 100%;
}

.box:before, .box:after {
  content:'';
  position: absolute;
  top: -10px;
  background-color: inherit;
  padding-top: 10px;
}
.box:before {
  width: calc(30% - 12px);;
  left: 0px;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  border-bottom: 1px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
}
.box:after {
  width: calc(70% - 12px);;
  right: 0px;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  border-bottom: 1px solid #FFFFFF;
  border-left: 3px solid #FFFFFF;
}

<div class="box">
    This is a transparent box (fixed width) with an transparent arrow (with borders)
</div>

<div class="box second">
    This is a transparent (responsive width) box with an transparent arrow (with borders)
</div>

Please feel free to improve and edit my quickly made demonstration to your needs.

G-Cyrillus · Answer

Another possibility is to use :before, border and background(linear-gradient or a one pixel image) .

p {
  margin: 40px 5% auto;
  padding: 1em;
  border: solid;
  color: white;
  border-top: none;
  position: relative;
  background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) 100px 0 no-repeat;
  background-size: 50px 3px, 100% 3px;
  /* background-position and background size are used to set length or position to leave a gap */
}
p:before {
  /* the arrow*/
  content: '';
  position: absolute;
  height: 35px;
  width: 35px;
  border-top: solid;
  border-right: solid;
  top: 0;
  left: 48px;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}
p+p {
  width: 20%;
  float:left;
}
p+p+p {
  width: 50%;
  border-radius: 5px;
}
p+p+p:before {
  border-radius: 0 5px;
}
html {
  height: 100%;
  background: url(http://lorempixel.com/640/480/nature/6) fixed;
  background-size: cover
}
body {
  min-height: 100%;
  background: rgba(0, 0, 0, 0.15);
  margin: 0;
  padding:5px;
  display:table;
}
* {
  box-sizing: border-box
}


p:first-of-type {
  background-color:rgba(250,250,0,0.25);
  box-shadow:-5px 5px 5px -5px ,5px 5px 5px -5px , 50px -50px 5px -50px
}
p:first-of-type:before {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0)  50% , rgba(250, 250, 0, 0.25)  50% ) 0 0 no-repeat;
  box-shadow: 5px 0 5px -5px black, 0 -5px 5px -5px black;
  background-size:38px 32px

}
p:first-of-type:after {
  content:'';
  position:absolute;
  top:0;
  left:-3px;
  width:60px;
  height:20px;
  box-shadow:-5px -5px 5px  -5px ;
}

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>

A shadow can be added on the main container and the pseudo, a second pseudo needs to be used to draw the last bit of shadow. a translucide background can even be added via an rgba() color and a gradient on the pseudo first paragraph in snippet (or 3rd paragraph in demo)

Jędrzej Chałubek · Answer

This solution allows for small border radius on popover container.

For arrow I used png image, but I'm pretty sure you can easily create whole popover fully in css.

.popover {
  position: relative;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  margin-top: 12px;
  padding: 12px 18px;
  display: block;
  border-radius: 4px;
}

.popover--fixed {
  width: 300px;
}

.popover--responsive {
  width: 75%;
}

.popover:before {
  content: " ";
  position: absolute;
  top: 0; left: 0;
  width: 20px;
  height: 2px;
  background-color: #fff;
}

.popover:after {
  content: " ";
  position: absolute;
  top: 0; right: 0;
  width: calc(100% - 32px);
  height: 2px;
  background-color: #fff;
}

.popover__arrow {
  width: 16px;
  height: 12px;
  background: url(http://i.imgur.com/oOMecP3.png) no-repeat;
  position: absolute;
  top: -6px; left: 18px;
}

* {
  box-sizing: border-box;
}

body {
  background: black;
  padding: 36px;
  background-image: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg);
  background-size: cover;
  color: white;
}

h1 {
  margin-top: 3px;
  margin-bottom: 9px;
}

p {
  margin-top: 3px;
  margin-bottom: 0;
}

<div class="popover popover--fixed">
  <div class="popover__arrow"></div>
  <h1>Fixed width</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p>
</div>


<div class="popover popover--responsive">
  <div class="popover__arrow"></div>
  <h1>Responsive width</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit? Lorem ipsum dolor sit amet, consectetur adipisicing elit?</p>
</div>

Is it possible to create arrow with transparent container with border?

Tags:

javascript

html

css

brabertaser19

4 Answers

Tawfiq abu Halawah

thepio

G-Cyrillus

Jędrzej Chałubek

Recent Activity

Donate For Us

Is it possible to create arrow with transparent container with border?

Tags:

javascript

html

css

brabertaser19

4 Answers

Tawfiq abu Halawah

thepio

G-Cyrillus

Jędrzej Chałubek

Related questions

Recent Activity

Donate For Us