How can I get rounded borders at the top and bottom of this curved line. Checkout the white line of this picture, that is what I want to achieve with CSS. Something like this
My Snippet:
.curved-line {
position: absolute;
width: 180px;
height: 90px;
border: solid 12.5px #000;
border-color: black transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
}
<div class="curved-line"></div>
Use :before & :after pseudo elements.
.curved-line:before {
content: '';
position: absolute;
top: 95%;
left: -12px;
width: 12.5px;
height: 12.5px;
border-radius: 50%;
background: black;
}
.curved-line:after {
content: '';
position: absolute;
top: 95%;
right: -11.5px;
width: 12.5px;
height: 12.5px;
border-radius: 50%;
background: black;
}
Have a look at the snippet below:
.curved-line {
position: absolute;
width: 180px;
height: 90px;
border: solid 12.5px #000;
border-color: black transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
position: relative;
}
.curved-line:before {
content: '';
position: absolute;
top: 95%;
left: -12px;
width: 12.5px;
height: 12.5px;
border-radius: 50%;
background: black;
}
.curved-line:after {
content: '';
position: absolute;
top: 95%;
right: -11.5px;
width: 12.5px;
height: 12.5px;
border-radius: 50%;
background: black;
}
<div class="curved-line"></div>
Hope this helps!
You can use pseudoelements before and after the curved-line class.
.curved-line {
position: relative;
width: 180px;
height: 90px;
border: solid 12.5px #000;
border-color: black transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
}
.curved-line:before {
content: '';
position: absolute;
left: 99%;
top: 91%;
background-color: black;
width: 13px;
height: 13px;
border-radius: 50%;
}
.curved-line:after {
content: '';
position: absolute;
left: -7%;
top: 91%;
background-color: black;
width: 13px;
height: 13px;
border-radius: 50%;
}
<div class="curved-line"></div>
var c = document.getElementById("curvedLine");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 140, 170, 140, 170, 20);
ctx.lineWidth = 10; //width of the line
ctx.lineCap = 'round';
ctx.stroke();
<canvas id="curvedLine"></canvas>
You can also use canvas to do this task
You can make the borders rounded using css pseudo class.
.curved-line {
position: absolute;
width: 180px;
height: 90px;
border: solid 12px #000;
border-color: black transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
}
.curved-line:after{
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
position: absolute;
top: 86px;
display: block;
left: -11px;
}
.curved-line:before{
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
position: absolute;
top: 86px;
display: block;
left: 179px;
}
<div class="curved-line"></div>
use befor and after , so you know use curved try to use 3 curved superimposed :)
.curved-line {
position: absolute;
width: 180px;
height: 100px;
/* background: black; */
border: solid 12.5px #000;
border-color: black transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
}
.curved-line:before {
content:'';
position: absolute;
width: 25px;
height: 25px;
left: 115px;
/* background: black; */
border: solid 12.5px #000;
border-color: white transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
}
.curved-line:after {
content:'';
position: absolute;
width: 25px;
height: 25px;
left: -74px;
/* background: black; */
border: solid 12.5px #000;
border-color: white transparent transparent transparent;
border-radius: 50%/100% 100% 0 0;
transform: rotate(180deg);
margin-left: 45px;
margin-top: 60px;
}
<div class="curved-line"></div>
Related
I want to make a speech bubble shape identical to the image.
What part of the CSS shown below can be modified to make it look like the picture?
Can you help me to get the look I want?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>
We can't bring exactly as it is. I have tried to bring it near the shape.
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>
Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.
It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index:-1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid white;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index:-1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: lightgray;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
This demo might help visualize how the stem is created:
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index: -1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid green;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index: -1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: red;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
Also see:
How to create a curved speech bubble?
Speech bubble with arrow
I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>
I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>
You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>
I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>
I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>
You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>
I have a few SVG glyphs whitch i need to draw with HTML.
Is it possible to create HTML with CSS so that it looks like the SVG?
My problem was the shadow at the arrows.
You could use clip-path for the arrows (and its shadow too) and pseudoelements with a box-shadow for the figure with the overlapped boxes
Codepen example
Markup
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>
Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }
The other two figures can be obtained with the same approach (they are just a simple change of size and colours)
Result
here is one of shape:
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}
<div class="triangle">Hello world </div>
How can we make this shape using CSS?
I'm able to write the below code using CSS but the shape generated output is a bit off. Can we do that using CSS?
.btn-arrow {
width: 15px;
height: 24px;
border: 2px solid red;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>
With CSS you can achieve that.
Just create ::after and ::before pseudoelements and the main box rotate 45 degrees. You can adjust the degrees on the linear-gradient part instead of "to right" sentence.
This trick is necessary because border-image and border-radius can't live both on the same element.
You can see more about this:
Possible to use border-radius together with a border-image which has a gradient?
https://css-tricks.com/examples/GradientBorder/
.shape {
position:relative;
width: 100px;
border-radius: 100% 100% 100% 0;
height: 100px;
transform: rotate(45deg);
margin: 0 auto;
background: white;
background-clip: padding-box;
}
.shape::after {
position: absolute;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
background: linear-gradient(to right, #fe3870, #fc5d3e);
content: '';
z-index: -1;
border-radius: 100% 100% 100% 0;
}
.shape::before {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
background: white;
content: '';
z-index: 1;
border-radius: 100% 100% 100% 0;
}
<div class="shape">
</div>
One of many possible solutions in just CSS:
This solution only requires one pseudo element.
.btn-arrow {
width: 44px;
height: 44px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: -webkit-linear-gradient(left, rgba(232,51,105,1) 0%,rgba(235,94,67,1) 100%); /* Chrome10-25,Safari5.1-6 */
transform:rotate(45deg);
position: relative;
}
.btn-arrow::after {
display: block;
width: 30px;
height: 30px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background: white;
position: absolute;
content: '';
top: 7px;
left: 7px;
}
body {
padding: 20px;
}
<div class="btn-arrow"></div>
Adjust the CSS to look like this
.btn-arrow {
width: 30px;
height: 30px;
border: 2px solid red;
border-radius: 100%;
border-left: 0;
display: inline-block;
position: relative;
}
.btn-arrow:after,
.btn-arrow:before {
right: calc(100% - 6px);
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.btn-arrow:after {
border-right-color: white;
border-width: 12px;
margin-top: -12px;
}
.btn-arrow:before {
border-right-color: red;
border-width: 14px;
margin-top: -14px;
}
body {
padding: 20px;
}