can you help me to make like this div:
My Code:
body{
display: flex;
justify-content: center;
}
#talkbubble {
width: 160px;
height: 80px;
background: #bc0a14;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #bc0a14;
border-bottom: 13px solid transparent;
}
#talkbubble:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-left: 26px solid #bc0a14;
border-bottom: 13px solid transparent;
}
<div id="talkbubble"></div>
I want to create this div with the same style in the image
here is an idea with pseudo element and radial-gradient. I used CSS variable to easily adjust the shape but it's not mandatory
.box {
width: 100px;
height: 50px;
margin:0 var(--w,20px);
display:inline-block;
border-radius: 15px;
background: var(--c,red);
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--w,20px);
right:calc(100% - 2px);
background:
radial-gradient(107% 100% at top left,transparent 96%,var(--c,red) 100%) top,
radial-gradient(107% 100% at bottom left,transparent 96%,var(--c,red) 100%) bottom;
background-size:100% 50.1%;
background-repeat:no-repeat;
}
.box:after {
left:calc(100% - 2px);
right:auto;
transform:scaleX(-1);
}
<div class="box"></div>
<div class="box" style="--c:blue;--w:30px;"></div>
<div class="box" style="--c:purple;--w:10px;height:60px"></div>
please try this code:
body{
display: flex;
justify-content: center;
}
#talkbubble {
width: 180px;
height: 54px;
background: #bc0a14;
position: relative;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 24px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 99%;
top: 17px;
width: 0px;
height: 1px;
border-top: 9px solid transparent;
border-right: 10px solid #bc0a14;
border-bottom: 9px solid transparent;
}
#talkbubble:after {
content: "";
position: absolute;
left: 99%;
top: 17px;
width: 0;
height: 1px;
border-top: 9px solid transparent;
border-left: 10px solid #bc0a14;
border-bottom: 9px solid transparent;
}
<div id="talkbubble"></div>
Related
Is there a way to achieve this border in CSS? I've got one DIV with list of bullet points and I need to wrap it in a border like the image.
You can first create one element with border except border-bottom and then use :before and :after pseudo-elements to add triangle border at bottom.
div {
width: 200px;
height: 150px;
border: 1px solid black;
border-bottom: none;
position: relative;
background: white;
margin: 20px;
}
div:after, div:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 50px 101px 0 101px;
border-color: black transparent transparent transparent;
top: 100%;
left: -1px;
position: absolute;
}
div:after {
border-color: white transparent transparent transparent;
top: calc(100% - 1px);
}
<div></div>
Have a look at this Fiddle
Basically add this css to a div:
#base {
background: red;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
#base:after {
border-bottom: 35px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 54px;
width: 0;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
try this one:
.down-arrow {
display: inline-block;
position: relative;
background: darkcyan;
padding: 15px 0;
width: 200px;
text-align: center;
}
.down-arrow:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 100%;
width: 0;
height: 0;
border-top: 20px solid darkcyan;
border-right: 100px solid transparent;
border-bottom: 0 solid transparent;
border-left: 100px solid transparent;
}
DEMO HERE
Here is the code for the box:
.box {
background: #fff;
border: 1px solid #000;
display: inline-block;
height: 55px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 100px;
}
.box:after {
border-top: 35px solid #fff;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 55px;
width: 0;
}
.box:before {
border-top: 35px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
content: '';
height: 0;
left: 0;
position: absolute;
top: 56px;
width: 0;
}
<div class="box">
</div>
I hope it helps
I have a simple div on a page:
<div>Some Text</div>
Is it possible with CSS, to make something like this:
You can use this code to make a similar arrow
<div class="arrow_box">Arrow</div>
.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}
There is even a website to produce similar snippet like the one mentioned above.
Hope this helps!
Here is the CSS and HTML markup you need to create this effect in your own project.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>
HTML
<div class="textBox">
Text
</div>
CSS
body{
background:#000;
}
.textBox{
padding:10px;
background-color:green;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
width:50px;
color:#fff;
position: relative;
}
.textBox::after{
content: '';
position: absolute;
width: 30px;
height: 29px;
background: green;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
top: 2px;
right: -18px;
z-index: -1
}
Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX
Sure can using a couple of pseudo elements. Example:
<div class="arrowBox">Some Text</div>
then use the following CSS (note, I've used a red border as opposed to white so I could see it):
.arrowBox{
width: 100px;
height: 50px;
background: green;
border: 5px red solid;
display: block;
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
.arrowBox:before{
content: '';
width: 0;
height: 0;
position: absolute;
right: -34px;
top: -5px;
border-top: 30px solid transparent;
border-bottom:30px solid transparent;
border-left: 30px solid red;
z-index: -1;
}
.arrowBox:after{
content: '';
width: 0;
height: 0;
position: absolute;
right: -25px;
top: 0;
border-top: 25px solid transparent;
border-bottom:25px solid transparent;
border-left: 25px solid green;
}
Something for you to get started:
*{
box-sizing:border-box;
}
.wrapper{
border: 1px solid #ddd;
display:inline-block;
position:relative;
}
div.arrow {
height: 50px;
line-height: 50px;
width: 75px;
background: green;
position: relative;
text-align:center;
border: 1px solid #ddd;
margin: 10px;
color:white;
font-weight:bolder;
}
div.arrow:before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
height: 0;
width: 0;
border-left: 25px solid green;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index:2;
}
div.arrow:after {
content: '';
display: block;
position: absolute;
right: -11px;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 35px solid white;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
z-index:1;
}
.wrapper:after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 36px solid #ddd;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
<div class="wrapper">
<div class="arrow">Text</div>
</div>
I have this box with an arrow:
#div1 {
position: fixed;
width: 140px;
min-height: 100px;
max-height: 400px;
background: #fff;
color: #000;
border: 1px solid #ccc;
//border-top:none;
z-index: 3000;
}
#div1:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
<div id=div1></div>
I want the arrow to have the same border as #div1 (1px solid #ccc) but it is white.
Any ideas how can I add a border color in the arrow?
JSFiddle
#div1 {
position: relative;
width: 140px;
min-height:100px;
max-height:400px;
background: #fff;
color: #000;
border:1px solid #ccc;
z-index:3000;
margin: 3rem;
}
#div1:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
display: block;
left: 0;
right: 0;
bottom: calc(100% - 6px);
width: 12px;
height: 12px;
transform: rotate(45deg);
border: 1px solid;
border-color: #ccc transparent transparent #ccc;
background-color: white;
}
<div id=div1></div>
I've modified your code a bit, but I think I've got your desired output
FIDDLE
#div1 {
position: fixed;
width: 140px;
min-height: 100px;
max-height: 400px;
background: #fff;
color: #000;
border: 1px solid #ccc;
}
#div1:before {
content: '';
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 93%;
width: 15px;
height: 15px;
background: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
<br>
<div id="div1"></div>
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
How do I create a non-rectangular border like in this image?
Current Code: http://jsfiddle.net/bqjr5wep/
div {
background:#1c1c1c;
width:400px;
height:200px;
position:relative;
}
div:before, div:after {
content:'';
display:block;
left:10px;
right:10px;
top:10px;
bottom:10px;
border:2px solid #FFF;
position:absolute;
}
div:after {
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Sample 1: Transparent background for shape with non-solid page background
Here is an approach which supports non-solid background for the page (gradient or image), transparent background for the shape and also is scalable. The downside probably is the fact that it requires more than one element.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 2: Solid color (non-transparent) background for shape
If the shape needs to have a different background compared to the page background and the shape's background is a solid color then the same approach with a small modification can be used. Sample is provided below:
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 3: Gradient/Image background for shape
You can also add an image (or) gradient different from the page background to the shape's background and it would look like in the below snippet. It cannot follow the outer border of the shape exactly.
body {
background: linear-gradient(90deg, crimson, indianred, purple);
}
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
background: url(http://lorempixel.com/600/600);
}
.shape:after {
position: absolute;
content: '';
top: -4px;
left: 10px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 2px 2px 0px 0px;
}
.shape:before {
position: absolute;
content: '';
top: 10px;
left: -4px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before {
position: absolute;
content: '';
height: 12px;
width: 12px;
top: -6px;
left: -6px;
border: 2px solid white;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
bottom: -6px;
right: -6px;
border: 2px solid white;
border-width: 2px 0px 0px 2px;
}
<div class="shape">
<div class="shape-inner"></div>
</div>
Sample 4: Semi-transparent background for shape
This is the trickiest of the lot but can still be achieved by doing some minor modifications to the snippet. The idea for this was picked from this thread.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: rgba(80, 80, 80, 0.75);
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape:after,
.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0.75;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
background: linear-gradient(180deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(270deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
background: linear-gradient(0deg, rgb(80, 80, 80) 5px, transparent 5px) no-repeat, linear-gradient(90deg, rgb(80, 80, 80) 4px, transparent 4px) no-repeat;
}
.shape-inner:before,
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid rgba(255, 255, 255, 0.75);
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/400/200/sports/Dummy-Text/);
}
<div class="shape">
<div class="shape-inner"></div>
</div>
I just created a simple SVG image and used the CSS border-image to create the desired effect.
http://jsfiddle.net/bqjr5wep/1/
div {
width:80%;
height: 200px;
position: relative;
margin:50px auto;
background-color: #1c1c1c;
}
div:before, div:after {
content:'';
display: block;
position: absolute;
left: 10px;
top:10px;
right: 10px;
bottom: 10px;
}
div:before {
border-style: solid;
border-width: 16px;
-moz-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-webkit-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
-o-border-image: url('http://imgh.us/border_1.svg') 16 repeat;
border-image: url('http://imgh.us/border_1.svg') 16 repeat;
}
div:after {
border:2px solid #FFF;
left:14px;
top:14px;
right:14px;
bottom:14px;
}
Try This
CSS:
.wrap{
width: 400px;
height: auto;
position: relative;
background: #000;
overflow: hidden;
padding: 20px;
}
.border-1{
width: 400px;
height: 200px;
position: relative;
border: 1px solid #fff;
}
.border-2{
width: 391px;
height: auto;
position: absolute;
border: 1px solid #fff;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
margin: auto;
z-index: 3;
}
.top-1{
position: absolute;
top: -2px;
left: -2px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
.bottom-1{
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
background: #000;
z-index: 2;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
Hope it helps :) Happy Coding.