14

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?

Dulani Maheshi
  • 1,070
  • 1
  • 10
  • 30
brabertaser19
  • 5,678
  • 16
  • 78
  • 184
  • Have you try reappending element to the DOM: `angular.element('.gifimage').replaceWith(function(){ return this;});`? Or maybe: `angular.element('.gifimage').src = null; angular.element('.gifimage').src = temp;` EDIT: i'm not angular developer so i'm not sure `angular.element('.gifimage')` is a jq (lite?) object – A. Wolff Nov 27 '15 at 08:46
  • EDIT: It should be if you are including jQuery: `jQuery(angular.element('.gifimage')).replaceWith(function(){ return this;});` But i guess the second way just swicthing `src` property would be enough – A. Wolff Nov 27 '15 at 08:59
  • 2
    you try this link. i hope it helps. [http://stackoverflow.com/questions/23758922/transparent-arrow-triangle](http://stackoverflow.com/questions/23758922/transparent-arrow-triangle) – DK3 May 30 '16 at 10:32
  • @DK3 maybe you can try on my code? there are a lot of ways there... – brabertaser19 May 30 '16 at 10:34
  • [So many](http://jsfiddle.net/joshnh/ptbbS/)... [different](http://jsfiddle.net/cfleschhut/JyFZF/)... [examples](http://jsfiddle.net/necolas/hjmqh/)... – C14L May 30 '16 at 11:08
  • @C14L none of them is valid solution for what needed, the needed is transparent container with transparent arrow – Tawfiq abu Halawah May 30 '16 at 11:27
  • I'm a little late for the party but please see my answer below for the (at least in my mind) most simple solution. Only one div is required for it to work. – thepio May 30 '16 at 12:14
  • https://css-tricks.com/examples/ShapesOfCSS/ – Alper Şaldırak Jun 03 '16 at 13:08

13 Answers13

10

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

Dulani Maheshi
  • 1,070
  • 1
  • 10
  • 30
Tawfiq abu Halawah
  • 1,214
  • 1
  • 12
  • 20
5

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.

thepio
  • 6,193
  • 5
  • 35
  • 54
  • I overlooked your entry completely. Already posted my version before I saw your solution. Looks like we think in the same css;-). – Navelpluisje Jun 05 '16 at 21:20
5

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)

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I checked a few answers. Is there an answer that does NOT use `calc` which is an experimental technology? – J.Joe Jun 03 '16 at 12:00
  • @J.Joe Well, it would be the linear-gradient that would be in the way more if you mind about older browsers . Beside, if you do not use percentage, then you can use any other units to size things :) letting calc() aside. in my example, calc is only used to draw part of a translucide gradient, wich is an option and not in the question – G-Cyrillus Jun 03 '16 at 12:27
  • @J.Joe i just removed the calc() css for a background-size in the case you need to draw a translucide background , else no need to even mind this part . – G-Cyrillus Jun 03 '16 at 12:35
3

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>
Jędrzej Chałubek
  • 1,410
  • 1
  • 16
  • 29
2

look at site. Shapes Examples https://css-tricks.com/examples/ShapesOfCSS/

Alper Şaldırak
  • 1,034
  • 8
  • 10
1

I'd like to – belatedly – offer a further approach which uses only a single element, and its two pseudo-elements, both the ::before and ::after:

body {
  background-color: #000;
}
.quote {
  border: 1px solid #fff;
  /* Hiding the top-border by making it transparent, to
     prevent a line from showing beneath the transparency
     of the pseudo-elements */
  border-top-color: transparent;
  
  /* adjustable to taste: */
  width: 50vw;
  padding: 0.4em;
  color: #fff;
  font-weight: bold;
  /* to allow the pseudo-elements to be placed relative
     to this element, rather than any other ancestors */
  position: relative;
  /* to ensure that the 'arrow' portion is entirely
     visible on screen and between any element
     vertically (on-screen) 'above' the current
     .quote element */
  margin-top: 2em;
}

/* defining the common settings of the arrow portions: */
.quote::before,
.quote::after {
  position: absolute;
  /* moving the arrows to the top of their parent */
  top: 0;
  content: '';
  border-bottom: 1px solid #fff;
  height: 1em;
  /* the negative of the pseudo-element's height
     to align the bottom-border of the pseudo-element
     over the top-border (transparent) of the parent
     element */
  margin-top: -1em;
}
.quote::before,
.quote.quote-center::before {
  /* the right border of the ::before
     pseudo-elements will form the left
     slope of the 'arrow': */
  border-right: 1px solid #fff;
  /* defining a width in which the 'arrow' base is
     equal to ten percent of the width of the element;
     adjust to taste */
  left: 0;
  right: 55%;
  /* skewing the rectangular pseudo-element into
     a parallelogram; the -45deg skews the rectangle
     to rightwards */
  transform: skew(-45deg);
  /* we want the bottom left corner of the pseudo
     element to stay in place relative to the top
     top-left corner of the parent, so we transform
     from that point */
  transform-origin: 0 100%;
  /* to position the left-most point of the pseudo
     element over the left-border of the parent */
  margin-left: -1px;
}
.quote::after,
.quote.quote-center::after {
  border-left: 1px solid #fff;
  left: 55%;
  right: 0;
  transform: skew(45deg);
  transform-origin: 100% 100%;
  margin-right: -1px;
}

/* repositioning the 'arrow' using another
   class-name to override the default placing;
   all other details remain the same */
.quote.quote-left::before {
  left: 0;
  right: 80%;
}
.quote.quote-left::after {
  right: 0;
  left: 30%;
}
.quote.quote-right::before {
  left: 0;
  right: 30%;
}
.quote.quote-right::after {
  right: 0;
  left: 80%;
}

/* defining a 'bold' arrow, as the
   picture in the question shows
   (though I'm unsure if that was a
   deliberate or incidental part of
   the image */
.quote.quote-bold::before {
  /* increasing the thickness of the arrow's
     left slope */
  border-right-width: 3px;
  /* adjusting the skew to a higher number to
     adjust for the changed thickness; this is
     somewhat arbitrary unfortunately and requires
     adjustment to values that work (so far as I
     can work out) */
  transform: skew(-48deg);
}
.quote.quote-bold::after {
  border-left-width: 3px;
  transform: skew(48deg);
}

/* entirely irrelevant to the demo; just to show
   the classes used in each of the elements which
   influence each of the pseudo-elements */
pre {
  color: limegreen;
}
pre::before {
  content: "Class: ";
}
<div class="quote">
  <!-- the <pre> elements are included only to show the
       classes used for styling the quotes, they have
       no part to play in the CSS which creates the
       'arrows' or 'quotes' -->
  <pre>"quote"</pre>
  <p>Lorem ipsum dolor sit amet, nibh patrioque nam ne, graeco consequat reprehendunt ut mei, ex enim labitur vis. Graeci causae adversarium his no. Pro enim causae nostrum eu. Ius unum ornatus liberavisse et, mei dolore menandri mandamus no.</p>
</div>

<div class="quote quote-center">
  <pre>"quote quote-center"</pre>
  <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
    innovation via workplace diversity and empowerment.

  </p>
</div>

<div class="quote quote-left">
  <pre>"quote quote-left"</pre>
  <p>Lorem Ipsum 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 class="quote quote-right">
  <pre>"quote quote-right</pre>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
    content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
    versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

  </p>
</div>

<div class="quote quote-left quote-bold">
  <pre>"quote quote-left quote-bold"</pre>
  <p>And with a emboldened arrow</p>
</div>

JS Fiddle demo.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
1

Here is a solution that doesn't use calc and looks cool on retina displays:

body,
.content {
  height: 100%;
  width: 100%;
  background-color: blue;
}
.box {
  color: white;
  font-family: "Lucida Console", Monaco, monospace;
}
<div class='content'>
<pre class='box'>
  __/\__________
 |              |
 |   DOST THOU  |
 |   LOVE ME?   |
 |______________|</pre>
<pre class='box'>
                    __________
                   |          |
                   |   NO.    |
                   |______  __|
                          \/</pre>
<pre class='box'>
  __/\__________
 |              |
 |   BUT THOU   |
 |   MUST!      |
 |______________|</pre>

</div>
nothingisnecessary
  • 6,099
  • 36
  • 60
0

Try This:

Here is https://jsfiddle.net/desqxw38/1/

<div class="arrow_box">
            Lorem Ipsum dummy set.
</div>

    body {
      margin:0;
  }
.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
    height:150px;
    margin-top:40px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 15%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}
Asim Iqbal
  • 148
  • 1
  • 7
0

You can use following snippet to create different arrows using HTML.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
<body>
    <table border=1 width=100% style="background-color:yellow">
        <tr>
            <td>
                <center>
                    <div style="width:0px;border:25px solid;border-color:Black yellow yellow yellow"><div>
                </center>
            </td>
            <td>
                <center>
                    <div style="width:0px;border:25px solid;border-color:yellow yellow black yellow"><div>
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <div style="width:0px;border:25px solid;border-color: yellow yellow yellow Black"><div>
            </td>
            <td>
                <div style="width:0px;border:25px solid;float:right;border-color:yellow Black yellow yellow"><div>
            </td>
        </tr>
    </table>    
</body>
</html>
Vipul
  • 356
  • 6
  • 18
0

This should do the trick:

.dropdown-content::before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: white white transparent transparent;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
 }
clickbait
  • 2,818
  • 1
  • 25
  • 61
0

Yes it is possible.

A transparent tooltip in it's cleanest form (I think)

Transparent tooltip

body {
  background-image: -webkit-linear-gradient(315deg, #fff, #aaa);
  background-image: linear-gradient(135deg, #fff, #aaa);
  background-size: 50px 50px;
}

.tooltip {
  border-color: #000;
  border-style: solid;
  border-width: 0 2px 2px;
  left: 20%;
  padding: 15px;
  position: absolute;
  top: 20%;
}
.tooltip::after, .tooltip::before {
  border-color: inherit;
  border-style: inherit;
  content: '';
  display: block;
  height: 10px;
  position: absolute;
  top: -10px;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
.tooltip::after {
  border-width: 0 2px 2px 0;
  left: -3px;
  -webkit-transform: skewX(135deg);
          transform: skewX(135deg);
  width: calc(30% - 10px);
}
.tooltip::before {
  border-width: 0 0 2px 2px;
  right: -2px;
  position: absolute;
  -webkit-transform: skewX(45deg);
          transform: skewX(45deg);
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  width: calc(70% - 10px);
}
<div class="tooltip">
  tooltip adf asd afdasdf asdfas fasdfas
</div>
Navelpluisje
  • 286
  • 1
  • 10
0

We can do like this

<style>
.triangle{
 width: 0;
 height: 0;
 margin-left:20px;
 border-left: 12.5px solid transparent;
 border-right: 12.5px solid transparent;
 border-bottom: 25px solid #00B0FF;
 opacity:0.3;
}
#tri{
 width:300px;
 height:100px;
 background-color:#00B0FF;
 opacity:0.3;
}
</style>

<div class="triangle"></div>
<div id="tri">
</div>
Mani
  • 2,675
  • 2
  • 20
  • 42
-2

try this demo here i used some code, i hope it helps html

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

css

.triangle {
position: absolute;
margin: auto;
top: -10px;
left: -160px;
right: 0;
width: 15px;
height: 15px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-1355deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;

}

https://jsfiddle.net/38kjb5us/1/

DK3
  • 403
  • 2
  • 10