We Keep Coding

Prevent caret from placing after & before img tag in contenteditable div

This is intended to be a custom text editor, made using a contenteditable div. All the text in the screenshoot should be editable, but the blockquote itself not.
The problem I have is that caret appears before and after the image in the blockquote div. It gets placed where the blue line is represented in the screenshot. I would want to prevent this from happen, but I haven't success by the moment.
The effect I would want is to only be able to place the caret inside the blockquote's text or in the previous p tag.
Here is the html:
.blockquote_img {
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
user-select: none;
-webkit-user-drag: none;
display: block;
}
.blockquote {
display: inline;
margin-top: auto;
margin-bottom: auto;
user-select: none;
margin-top: 10px;
}
blockquote {
background: #eee;
border-radius: 5px;
margin: 16px 0;
min-height: 40px;
}
blockquote p {
padding: 15px;
}
.blockquote_img:before,
.blockquote_img:after {
display: none;
}
<div id="editor_body" contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at est euismod suscipit id quis purus.</p>
<div class="blockquote">
<span class="span_lat" style="display:inline-flex">
<img class="blockquote_img"
height="50px" width="50px" />
<blockquote>
<p>Edit this content to add your own quote</p>
</blockquote>
</span>
</div>
</div>

You can do something like this:
.blockquote_img {
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
user-select: none;
-webkit-user-drag: none;
display: block;
}
.blockquote {
display: inline;
margin-top: auto;
margin-bottom: auto;
user-select: none;
margin-top: 10px;
}
blockquote {
background: #eee;
border-radius: 5px;
margin: 16px 0;
min-height: 40px;
}
blockquote p {
padding: 15px;
}
.blockquote_img:before,
.blockquote_img:after {
display: none;
}
<div id="editor_body">
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at est euismod suscipit id quis purus.</p>
<div class="blockquote">
<span class="span_lat" style="display:inline-flex">
<img class="blockquote_img"
height="50px" width="50px" />
<blockquote>
<p contenteditable="true">Edit this content to add your own quote</p>
</blockquote>
</span>
</div>
</div>

Text-overflow ellipsis on a nested element with absolute position

I'm trying to find a way to have text ellipsis at the point of contact with the righthand side of the green container. My impression at this time is that this might actually be impossible to do in CSS when the text box is part of an absolutely positioned wrapper.
Is there a way of doing this with CSS only? Is this only doable via javascript to dynamically calculate the width of the text box to create the illusion that it is bound by the size of the green container?
The solution cannot involve removing the absolute positioning. This is a simple extrapolation of a more complicated UX.
* {
background-color: white;
}
.container {
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
position: relative;
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</div>
</div>
</div>
</div>

You could set the absolute container to go to the right of 0. And set the position relative to the parent container which you want it to take as its relative reference, which, as you say, is the green one. –
* { background-color: white; box-sizing: border-box;}
.container {
position: relative;
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
right: 0;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod
</div>
</div>
</div>
</div>

jQuery mouseenter() function not working as expected

I'm trying to make a div. when hovering on it (I'm using mouseenter and mouseleave jquery function) the div change its size and when click on it it should show an other div. for that i'm using click function. it works some time and some time don't. here is my jquery code.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
$('.box').click(function(e) {
e.preventDefault();
console.log('clicked');
$('.box2').css('display', 'block');
});
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
}); // End of document ready function
body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

You are chaining multiple event binding. in your code, every time that the mouseenter is triggered, a new callback is added to the click event.
$(document).ready(function() {
$('.box').mouseenter(function() {
$('.mainBox').css('font-size', '32px');
$('.box').css('overflow', 'auto');
});
$('.mainBox').mouseleave(function() {
$('.mainBox').css('font-size', '16px');
$('.box').css('overflow', 'auto');
$('.box').css('background-color', 'white');
});
$('.box').click(function(e) {
e.preventDefault();
if($('.box2').css('display') === 'block'){
$('.box2').css('display', 'none');
} else {
$('.box2').css('display', 'block');
}
});
}); // End of document ready function
body {
padding: 0;
margin: 0;
background-color: lightgray;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.mainBox {
margin: auto;
margin-top: 20px;
border: 1px solid;
background-color: white;
padding: 10px;
width: 80%;
resize: both;
overflow: auto;
transition: font-size .5s;
}
.dBox {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
width: 80%;
padding: 20px;
background-color: gainsboro;
}
.box {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid white;
padding: 20px;
background-color: gainsboro;
}
.box2 {
border: 1px solid gray;
padding: 20px;
background-color: gainsboro;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainBox">
<div class="box">Vantablack is a material developed by Surrey NanoSystems in the United Kingdom and is one of the darkest substances known, absorbing up to 99.965% of visible light (at 663 nm if the light is perpendicular to the material)</div>
<div class="box2">second box Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore iusto cupiditate nemo.</div>
</div>
<div class="boxOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dolorum alias assumenda enim iusto fugiat hic quis quam vel voluptatem, doloribus amet eveniet sit modi est quia consequatur quaerat nostrum!</div>
<div class="dBox box4 1">British engineering firm Surrey NanoSystems is showing off the latest (and blackest) version of what’s described as the “world’s darkest material,” which it calls Vantablack. The material absorbs up to 99.965 percent of incoming radiation, including visible
light and other common frequencies like microwaves and radio waves. The result is a black so dark that it’s more like a bottomless pit from which no light can emerge. </div>

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

Is it possible to create something like this:
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?

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

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.

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)

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>

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

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.

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>

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

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>

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

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>

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>

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/

Hover not working on div tag, instead changing color of inner text element

I have followed a tutorial of responsive grid from this Link and got the following code.
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
.group a:hover{
background: #3374C2;
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
display: block;
width: 32%;
margin: 0.1%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
.innerDiv{
width: 100%;
border: 1px solid;
border-radius: 15px;
border-color: #F3F3F3;
}
.innerDiv :hover{
border: 1px solid #1abc9c;
}
<div class="section group">
<a href="javascript:void(null);">
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</a>
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="col span_1_of_3">
<div class="innerDiv">
<h5>Illustrator</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</div>
Please note that I have added an additional div named innerDiv. Its css is stated as On hover event I want to change the border color of it.
But instead it is adding the border color to the and tag
Please help!
Thanks in advance.

Replace
.innerDiv :hover{
border: 1px solid #1abc9c;
}
With
.innerDiv:hover{
border: 1px solid #1abc9c;
}
I hope it will solve your problem