I am trying to create this pointed arrow for a div which has the following design:
What I did so far was:
.box {
width: 200px;
height: 100px;
position: relative;
border-radius: 8px;
background-color: #F6F4FF;
border: 1px solid lightgray;
}
.box:before {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 16px;
height: 16px;
background-color: #F6F4FF;
transform: translateX(-50%) rotate(45deg);
border: 1px solid lightgray;
border-radius: 4px;
z-index: -1;
}
<div class="box"></div>
Is there a way to do it including that border that follows this rounded path?
changed in your before
z-index: 1;
border-top: lightgray;
border-left: lightgray;
.box {
width: 200px;
height: 100px;
position: relative;
border-radius: 8px;
background-color: #F6F4FF;
border: 1px solid lightgray;
}
.box:before {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
width: 16px;
height: 16px;
background-color: #F6F4FF;
transform: translateX(-50%) rotate(45deg);
border: 1px solid lightgray;
border-radius: 4px;
z-index: 1;
border-top: lightgray;
border-left: lightgray;
}
<div class="box"></div>
Related
I am trying to create a div that looks like that. See the top and bottom with the little tab. I cannot figure out how to do this, it is a "design" thing. I have tried to use the :before :after CSS to create this but no luck. Any ideas?
Added code below. You can see it comes to a point, any way to have it flat?
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
right: 0px;
top: -15px;
border-top: none;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 15px solid black;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
right: 0px;
bottom: -15px;
border-top: 15px solid black;
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: none;
}
<div class="container tab-top tab-bottom">
</div>
Don't use borders for this. Create a pseudo element and use border-radius.
.container {
width: 150px;
height: 75px;
background-color: white;
border: 3px solid #000;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.container.tab-top:before {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:20px 20px 0 0;
top: -7px;
}
.container.tab-bottom:after {
content: " ";
position: absolute;
width: 60%;
height: 7px;
left: 50%;
transform: translateX(-50%);
background: black;
border-radius:0 0 20px 20px;
bottom: -7px;
}
<div class="container tab-top tab-bottom">
</div>
You can approximate it using perspective and rotation:
.container {
width: 200px;
height: 100px;
border: 3px solid #000;
position: relative;
margin: 40px
}
.container.tab-top:before,
.container.tab-bottom:after {
content: " ";
position: absolute;
left:15%;
right:15%;
height:30px;
background:#000;
}
.container.tab-top:before {
bottom:100%;
border-radius:10px 10px 0 0;
transform-origin:bottom;
transform:perspective(100px) rotateX(50deg);
}
.container.tab-bottom:after {
top:100%;
border-radius:0 0 10px 10px;
transform-origin:top;
transform:perspective(100px) rotateX(-50deg);
}
<div class="container tab-top tab-bottom">
</div>
You need to use Trapezoid Shape css like:
#trapezoid {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
.box {
display: block;
width: 150px;
height: 200px;
border: 2px solid pink;
position: relative;
}
.box::before {
position: absolute;
content: "";
border-bottom: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
top: -10px;
left: 0;
right: 0;
margin: auto;
}
.box::after {
position: absolute;
content: "";
border-top: 10px solid pink;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 100px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
}
<div class="box"></div>
I used as before after css of a div.
I'm trying to draw a circle with tick/checkmark inside it using pure css3
.success-checkmark {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
How can i achieve i have tried with the above code?
You can use content: '✔'; only on pseudo elements, so try using the following selector:
.success-checkmark:after {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
position: relative;
background: #00B01D;
border-radius: 100%;
height: 120px;
width: 120px;
}
.checkMark {
position: absolute;
transform: rotate(50deg) translate(-50%, -50%);
left: 27%;
top: 43%;
height: 60px;
width: 25px;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
}
<div class="wrapper">
<div class="circle">
<div class="checkMark"></div>
</div>
</div>
I found a template online to which I made modifications. Kindly check if this works for you.
:root {
--borderWidth: 7px;
--height: 25px;
--width: 12px;
--borderColor: white;
}
body {
padding: 20px;
text-align: center;
}
.check {
display: inline-block;
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--borderColor);
border-right: var(--borderWidth) solid var(--borderColor);
}
.behind {
border-radius: 50%;
width: 40px;
height: 40px;
background: black;
}
<div class="behind">
<div class="check">
</div>
</div>
css
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
}
vertical adjustment
line-height:20px;<--- adjust vertical alignment
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
width: 90px;
height: 90px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
I'm trying to show a part of a semicircle with CSS and HTML but there is always a little "shadow" that persists around the covered border. This is my codepen that show what I'm saying. The red on the right shouldn't be shown. Maybe this is a bug of the browser. I tried it on Firefox and Chrome.
This is the sample code:
CSS:
.background {
width: 100%;
height: 500px;
border: 1px solid black;
background-color: black;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid black;
border-bottom: 3px solid red;
transform: rotate(-20deg);
z-index: 0;
}
.cover {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid black;
border-bottom: 3px solid transparent;
transform: rotate(20deg);
z-index: 10;
}
HTML:
<div class="background">
<div class="cover"></div>
<div class="circle"></div>
</div>
It doesn't seem like you need those two transforms. Try this:
.background {
width: 100%;
height: 500px;
border: 1px solid black;
background: black;
}
.circle {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid black;
border-bottom: 3px solid red;
/* transform: rotate(-20deg); */
z-index: 0;
}
.cover {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid black;
border-bottom: 3px solid transparent;
/* transform: rotate(20deg); */
z-index: 10;
}
I want to put this shape transparent inside, with a white border. The problem is that i don't know how to change the right side of the shape. I would like to do the same thing that i did on the left side.
How can i do that? Thanks.
https://jsfiddle.net/2pz0kLd4/
Code:
.arrow-steps {
width: 128px;
height: 100px;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid white;
margin-right:30px;
margin-top:30px;
position: relative;
display:inline-block;
}
.arrow-steps:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
}
.arrow-steps:before {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid red;
}
.arrow-steps a{
display:block;
margin-top:36px;
color:white;
}
Try something like this:
Here's a fork
body{
background-color:black;
}
.arrow-steps {
width: 128px;
height: 100px;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid white;
margin-right:30px;
margin-left: 20px;
margin-top:30px;
position: relative;
display:inline-block;
}
.arrow-steps:after {
content: '';
position: absolute;
top: 0px;
left: -12px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 12px solid red;
border-bottom: 50px solid transparent;
}
.arrow-steps:before {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 12px solid red;
border-bottom: 50px solid transparent;
}
.arrow-steps a{
display:block;
margin-top:36px;
color:white;
}
Here's a basic solution to allow both sides to have a border (would need to be altered as I haven't made it responsive)
html {
background: tomato;
}
div {
height: 60px;
width: 100px;
border-top: 2px solid white;
border-bottom: 2px solid white;
color: white;
line-height: 60px;
position: relative;
margin: 30px;
text-align:center;
}
div:before {
content: "";
position: absolute;
height: 42px;
top: 8px;
left: -22px;
width: 42px;
border-left: 2px solid white;
border-bottom: 2px solid white;
perspective: 100px;
transform: rotate(45deg)
}
div:after {
content: "";
position: absolute;
height: 42px;
top: 8px;
right: -22px;
width: 42px;
border-right: 2px solid white;
border-top: 2px solid white;
perspective: 100px;
transform: rotate(45deg)
}
<div>SOME TEXT</div>
This question already has answers here:
How to create a transparent triangle with border using CSS?
(9 answers)
Closed 6 years ago.
I want create hollow triangle with CSS but I don't how to hollow that. I can create triangle with CSS but I have one problem and this is: I can't hollow this triangle.
This is my code:
HTML:
<div id="tringle"></div>
CSS:
#tringle {
position: absolute;
height: 0;
width: 0;
top: 50%;
left: 7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid white;
}
Not exactly cross-browser but works. Hope I've understood your request.
http://jsfiddle.net/wmDNr/3/
.triangle {
position: relative;
width: 20px;
margin-top: 100px;
}
.triangle>div {
width: 20px;
height: 2px;
background: red;
margin-top: 100px;
}
.triangle>div:before {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(56deg);
-moz-transform: rotate(56deg);
-ms-transform: rotate(56deg);
transform: rotate(56deg);
position: absolute;
top: -8px;
right: -5px;
}
.triangle>div:after {
content: " ";
display: block;
width: 20px;
height: 2px;
background: red;
-webkit-transform: rotate(-56deg);
-moz-transform: rotate(-56deg);
-ms-transform: rotate(-56deg);
transform: rotate(-56deg);
position: absolute;
top: -8px;
left: -5px;
}
I don't have solution but i have workaround with two triangle, FIDDLE
HTML CODE
<div id="tringle"></div>
<div id="tringle2"></div>
CSS CODE
#tringle {
left:10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
#tringle2 {
left:10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
}
Forking off rajesh kakawat - you can get the same effect with one div: http://jsfiddle.net/aDcTb/
<div id="triangle"></div>
#triangle {
left:10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
}
#triangle:after {
left:10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
content: '';
}