Please see the following CSS rules I'm using right now to create a rectangle with "arrow-effect" left and right:
CSS:
.hexagon {
position: relative;
width: 60px;
height: 34.64px;
background-color: #64C7CC;
margin: 17.32px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 17.32px solid #64C7CC;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 17.32px solid #64C7CC;
}
HTML:
<div class="hexagon"></div>
Can anyone help me out what to do when I need a rectangle with width:60px and height:22px and triangles left/right which fits?
JSFiddle - DEMO
.hexagon {
position: relative;
width: 60px;
height: 22px;
background-color: #64C7CC;
margin: 50px;
}
.hexagon:before,
.hexagon:after {
content: " ";
position: absolute;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
.hexagon:before {
left: 100%;
border-left: 11px solid #64C7CC;
}
.hexagon:after {
right: 100%;
border-right: 11px solid #64C7CC;
}
<div class="hexagon"></div>
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 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>
My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes.
In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible.
How do I make the arrow visible?
HTML:
<div class="arrow"></div>
<div class="arrow"></div>
CSS:
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
EDIT:
The first arrow must overlap the box to the right. See solution from artSx: http://jsfiddle.net/LHHzt/6/ Only thing missing from this solution is that it should be possible to add several (more than two) boxes
if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
margin-right:15px;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
http://jsfiddle.net/peteng/LHHzt/15/
add this :
.arrow:first-child{
z-index:10;
}
JsFiddle with correction
Just add a z-indexto your .arrow:before. Here is the live version http://jsfiddle.net/LHHzt/13/
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
z-index:2;
border: 50px solid transparent;
border-left: 12px solid #999;
}
Works with as many box as you want :)
try this
http://jsfiddle.net/casperskovgaard/LHHzt/1/
.arrow {
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
Just add a margin to the arrow...
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
margin-right: 15px;
}
http://jsfiddle.net/LHHzt/11/
Or change z-index to display above if you want them to overlay
Just adding a margin to the arrow resolves the problem.
See this JSFiddle : http://jsfiddle.net/LHHzt/9/
I just added a
margin-right: 15px;
I want to create a border with two cut off corners for my website. I need this border for different div sizes.
After an hour or so I got it to work with a fixed size of 200px. But I don't know how I can get this flexible.
Here's a
Demo
HTML
<div id="outer"><span>Some Text</span></div>
CSS
body {background: #000;}
#outer {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto;
margin-top: 50px;
background: #0ff;
}
#outer:before {
content: "";
height: 200px;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 200px;
height: 200px;
top: -15px;
right: -215px;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span {
width: 200px;
height: 200px;
position: absolute;
padding: 50px;
}
#outer span:before {
display: block;
content: "";
width: 200px;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 200px;
height: 200px;
top: 200px;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}
Anyone knows a better solution? Thanks
You pretty much have it yourself. I adapted the fiddle to use percent values for the dimensions and positions. It's still 15px wide for the border though:
Demo: http://jsfiddle.net/b48AK/show
Source: http://jsfiddle.net/b48AK
body {background: #8aa; padding:0px; margin:0px}
#outer {
background: #bfb;
position:relative;
margin:15px;
}
#outer:before {
content: "";
height: 100%;
left: -15px;
position: absolute;
border-top: 15px solid transparent;
border-right: 15px solid #fff;
}
#outer:after {
content: "";
width: 100%;
height: 100%;
top: -15px;
left: 100%;
position: absolute;
border-left: 15px solid #fff;
border-bottom: 15px solid transparent;
}
#outer span:before {
display: block;
content: "";
width: 100%;
top: -15px;
left: 0;
position: absolute;
border-bottom: 15px solid #fff;
border-left: 15px solid transparent;
}
#outer span:after {
display: block;
content: "";
width: 100%;
height: 100%;
top: 100%;
left: -15px;
position: absolute;
border-top: 15px solid #fff;
border-right: 15px solid transparent;
}