I want to create a diamond using css3. I have this code which returned partial results.
.diamond {
width: 100%;
height: 100%;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 100%;
height: 100%;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Check out this link you can access different type of shapes.
https://css-tricks.com/examples/ShapesOfCSS/#cut-diamond
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
#cut-diamond {
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
#cut-diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
<div id="cut-diamond"></div>
You need to change 100% to 0 like below:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px; }
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
bord*emphasized text*er: 50px solid transparent;
border-top-color: red;
}
Change css like:
.diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
.diamond:after {
content: '';
position: absolute;
left: -50px;
top: 19px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}
<div class="diamond" />
You can find different shape from here
Related
I need to create a chevron style progress bar which I can do with solids but I would like to only have the active step solid and the inactive steps hollow. How can I do this? This is what I have so far. Any ideas how can I accomplish this?
<div class='grid'>
<div class='step'></div>
<div class='step'></div>
<div class='step'></div>
<div class='step'></div>
</div>
.grid {
width: 660px;
display: grid;
grid-auto-flow: column;
}
.step {
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
Above is a short example. Here is my Fiddle for the full CSS:
https://jsfiddle.net/6h1L87wm/4/
What you can do is just put a border around the grid that matches the arrows. I also changed the display to flex and set the justification to space-between to ensure the arrows go from start to finish.
.grid {
width: 660px;
display: flex;
justify-content: space-between;
border-radius: 10px 10px 0 0;
border: 1px solid #002453;
}
/* ----- step1 ----- */
.step1 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
border-radius: 10px 0px 0px 0px;
color: white;
}
.step1:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step1 ----- */
/* ----- step2----- */
.step2 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step2:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step2----- */
/* ----- step3---- */
.step3{
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step3:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step3---- */
/* ----- step4 ----- */
.step4 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
border-radius: 0px 10px 0px 0px;
color: white;
}
.step4:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step4 ----- */
<div class='grid'>
<div class='step1'></div>
<div class='step2'></div>
<div class='step3'></div>
<div class='step4'></div>
</div>
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 have this css code to add one arrow to my dropdown:
div {
&.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
&:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-bottom: 6px solid #cdd1da;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-color: transparent transparent #fff transparent;
border-width: 6px;
background: #cdd1da;
}
}
}
This is the result:
I would like to remove grey corner but keep grey border:
Thank you
I have created snippet according to requirement, Currently done with css, you can make scss or i will create a pen let me know. please check:
div.toggle-assessment-key-dropdown {
margin-top: 10px;
border: 1px solid #cdd1da;
min-width: 180px;
border-radius: 4px;
min-height: auto;
padding: 6px 10px 5px 9px;
background: #ffffff;
position: absolute;
top: 24px;
left: 0;
z-index: 501;
}
div:before {
content: '';
position: absolute;
bottom: 100%;
left: 26%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #cdd1da transparent;
border-width: 7px;
}
div:after {
content: '';
position: absolute;
bottom: 100%;
left: 27%;
margin-left: 8px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 5px;
}
<div class="toggle-assessment-key-dropdown">
Item
</div>
I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?
You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>
Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>
You could play with this, it has a border like your image http://www.cssarrowplease.com/
Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or height? Thanks
http://jsfiddle.net/wn7JN/463/
.bubble
{
position: relative;
width: 100px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
Try this. I add some changes check,
.bubble
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
margin:0 0 0 -26px;
}
replace the .arrow:before style & try it. it will align the arrow at center bottom.
.arrow:before
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}