This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 6 years ago.
i'm making special boxes with shape like this, i don't know how to draw this with css
You can first create rectangle with border-radius and add triangle with :after pseudo-element.
.shape {
width: 200px;
height: 50px;
background: #B67025;
margin: 50px;
border-radius: 25px;
position: relative;
}
.shape:after {
content: '';
position: absolute;
border-style: solid;
right: 0;
top: 50%;
border-width: 10px 0 10px 10px;
transform: translate(80%, -50%);
border-color: transparent transparent transparent #B67025;
}
<div class="shape"></div>
Look here at the example Talk Bubble: https://css-tricks.com/examples/ShapesOfCSS/
and here'e the code:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 50px
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent; }
<div id="talkbubble"></div>
SVG
Creating a complex shape is easier to do with a SVG then CSS:
svg {
/*For demonstration only*/
border: 1px solid black;
}
<svg width="300px" viewBox="0 0 200 100">
<path d="m50,10 95,0
a40 40 0 0 1 40,30
l10,10
l-10,10
a40 40 0 0 1 -40,30
h-95 a1 1 0 0 1 0,-80z" fill="rgb(182, 112, 37)"/>
</svg>
Impressed with the solution given by #Nenad Vracar
Here is another way of doing the same, may be helpful in understanding the CSS properties.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.main-div {
position: relative;
}
.first {
width: 150px;
height: 50px;
background: #B67025;
border-radius: 25px 0 0 25px;
float: left;
position: absolute;
top: 0;
}
.second {
width: 50px;
height: 50px;
background: #B67025;
border-radius: 0 25px 25px 0;
float: left;
position: absolute;
left: 150px;
}
.third {
position: absolute;
left: 197px;
top: 15px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #B67025;
}
</style>
</head>
<body>
<div class="main-div">
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</div>
</body>
</html>
Related
I have parent and child div tag. I want to point arrow to child div tag from parent div tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
</style>
</head>
<body>
<div id="curves" class="width"> parent
<div id="curve1"> child </div><span class="arrow-right"> </span>
</div>
</body>
</html>
No javascript, Learning to use arrow in css
I want to make like this image
Here is an arrow with pure CSS. Supported by all browsers.
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
As already mentioned, you can do it with pseudo-elements. Here's a way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
display: inline-flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
.children {
position: relative;
}
.children {
margin-left: 12px;
}
.parent .children:not(:last-of-type):before {
content: "";
width: 1px;
height: 100%;
background-color: #666;
top: 0;
left: -10px;
position: absolute;
}
.parent .children:last-of-type:before {
content: "";
width: 6px;
height: 10px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
border-radius: 0 0 0 6px;
top: 0;
left: -10px;
position: absolute;
font-size: 10px;
line-height: 19px;
}
.parent .children:last-of-type:after {
content: "";
width: 4px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #666;
top: 5px;
left: -6px;
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="children">child</div>
<div class="children">child</div>
</div>
<div class="parent">
Parent
<div class="children">child</div>
</div>
</body>
</html>
I have a wizard with divs with two arrows with this html
.container {
padding: 10px 20px;
display: flex;
}
div.arrow {
width: 261.5px;
height: 50px;
background-color: #d3d3d3;
position: relative;
margin-right: 30px;
text-align: center;
line-height: 50px;
}
.current {
filter: drop-shadow(2px 3px 7px grey);
}
div.arrow::after {
content: "";
position: absolute;
top: 0;
border: 0 solid #d3d3d3;
border-width: 25px 10px;
width: 0;
height: 0;
left: 100%;
border-color: transparent transparent transparent #d3d3d3;
}
div.arrow::before {
content: "";
position: absolute;
top: 0;
border: 0 solid #d3d3d3;
border-width: 25px 10px;
width: 0;
height: 0;
left: -20px;
border-left-color: transparent;
}
<div class="container">
<div class="arrow">Previous status</div>
<div class="arrow current">Current status</div>
</div>
I have a class called "current" where I applied a drop-shadow effect. It works fine but IE doesn't support it and I can't find a solution for solving this issue. Any help to solve this problem? I can't edit the existing css...
Here a codepen: https://codepen.io/andy_888/pen/bGdKxjv
Thank you
I have CSS code
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
text-align: center;
color: white;
padding-top: 10px;
}
#box::before,
#box::after {
content: "";
width: 0;
height: 0;
right: 0;
position: absolute;
}
#box::before {
border-right: 10px solid blue;
border-top: 10px solid blue;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
bottom: -20px;
}
#box::after {
border-right: 10px solid blue;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid blue;
position: absolute;
top: -20px;
}
<div id="box">#box</div>
which gives some shape like
shape I need is
I need curved line instead of hypotenuse in triangles at top-right (#box::before) and bottom-right (#box::after) as in image.
Is there any way to achieve using pure CSS ?
codesandbox demo
Thanks
You can create a concaved radius using the box-shadow property.
This technique creates a transparant square with overflow hidden.
It then creates a transparant circle with a box shadow.
We then adjust the position of the circle to only view 1 quarter of
it.
SNIPPET
#box {
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
<div id="box">
<div id="top"></div>
#box
<div id="bottom"></div>
</div>
You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
}
#box::before,
#box::after {
content: "";
width: 20px;
height: 20px;
right: 0;
position: absolute;
}
#box::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
bottom: -20px;
}
#box::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
top: -20px;
}
<div id="box"></div>
Can you use negative space? You could have a container with the same background color as your shape, then round the corners surrounding elements to create the illusion.
.container {
background-color: blue;
width: 100%;
}
.negat {
background-color: white;
height: 100px;
}
.posit-bg {
background-color: white;
}
.posit {
background-color: blue;
height: 100px;
border-radius: 50px 0px 0px 50px;
}
.top {
border-radius: 0px 0px 50px 0px;
}
.bot {
border-radius: 0px 50px 0px 0px;
}
<div class="container">
<div class="negat top"></div>
<div class="posit-bg">
<div class="posit"></div>
</div>
<div class="negat bot"></div>
</div>
#box{
width:200px;
height:50px;
background-color:blue;
color:#ffffff;
text-align:center;
padding-top:30px;
border-radius:9999px 0 0 9999px;
}
.sq{
width:25px;
height:25px;
background-color:blue;
}
#sq1,#sq2,#sq11,#sq22{
border-radius:-999px;
margin-left:175px;
}
.sq1{
background-color:#ffffff;
height:25px;
width:25px;
}
#sq11{
border-bottom-right-radius:9999px;
margin-bottom:-25px;
position: relative;
z-index:1;
}
#sq22{
border-top-right-radius:9999px;
margin-top:-25px;
position: relative;
z-index:1;
}
<div class="sq1" id="sq11"></div>
<div class="sq" id="sq1"></div>
<div id="box">#box</div>
<div class="sq" id="sq2"></div>
<div class="sq1" id="sq22"></div>
I am trying to create a speech bubble using two divs, one is a triangle and the other is a rectangle.
This is the code:
#box {
width: 200px;
height: 80px;
background-color: #ccc;
position: relative;
left: 300px;
top: 180px;
padding: 5px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
#tri {
position: absolute;
top: -15px;
left: 40px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #ccc;
float: left;
margin: 2px 5px 0px 0px;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
<div id="box">
<div id="tri"></div>
Some text
</div>
This problem is that something happens at the point where the triangle connects to the box. The shadow doesn't go around the triangle. Is it possible to fix this so that the shadow goes around the box and continues around the triangle?
Using that technique, you wont be able to place a shadow on the triangle shape.
We can create the triangle with an :after pseudo-element and create the boxes main shadow with a :before pseudo-element.
The Triangle
The triangle looks like a diamond and the background of the box overlaps the diamond to make it look like a triangle:
This: becomes this:
The z-index: -1 places both pseudo-elements underneath their parents background.
The main shadow
The main shadow needs to be placed on a pseudo-element so that it can be overlapped by the triangle background, whilst at the same time, the triangles bottom half is overlapped by the elements background. This image shows the layers:
Full Example
#box {
width: 200px;
height: 80px;
background: #CCC;
position: relative;
left: 300px;
top: 180px;
padding: 5px;
border-radius: 10px;
}
#box:before,
#box:after {
content: '';
position: absolute;
box-shadow: 0 0 5px #333;
z-index: -1;
}
#box:before {
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 10px;
}
#box:after {
background: #CCC;
height: 20px;
width: 20px;
top: -10px;
left: 50%;
margin-left: -5px;
transform: rotate(45deg);
z-index: -1;
}
<div id="box">
Some text
</div>
Use this
DEMO
.arrow_box {
position: relative;
top:150px;
background: #88b7d5;
border: 4px solid #c2e1f5;
width:200px;
height:80px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 20%;
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;
}
No, there's no way to apply a shadow to that triangle. The shadow applies to a div, and divs are square. You could use an image or svg instead.
Or you could try this. Remove the shadow from the triangle and add this code.
#tri:after {
content:'';
position:absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid rgba(0,0,0,.25);
width: 0;
height: 0;
top: -2px;
right: -10px;
z-index: -1;
}
I know it is not the same but, it's something.
try this
<div id="box">
<div class="mask"></div>
<div id="tri"></div>
.mask{
background-color:#ccc;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
please help to draw a pentagon means css.
I definitely need to pentagon could completely fill the text. The text should not extend beyond the pentagon (overflow:hidden).
html:
<div class="carousel_gallery" id="carousel_gallery">
укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>
</div>
css:
body{
position: relative;
}
.carousel_gallery {
width: 360px;
height: 365px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -185px;
border: 1px solid red;
overflow: hidden;
}
.carousel_gallery:before {
content: "";
width: 255px;
height: 255px;
margin-left: 52px;
margin-top: 237px;
position: absolute;
border-bottom: 1px solid red;
border-right: 1px solid red;
-webkit-transform: rotate(45deg);
background: white;
}
fiddle
customize this pentagon..hope this will help you!
<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>you text</div></div>