I would like to create a navbar that looks like this: https://www.audacityteam.org/
I tried this but I think this doesn't look right. The border from the notch is on top of the left and right placeholders when it shouldn't be. Also I think I made this too complicated; can this be done with fewer div elements?
:root {
--background: black;
--accent: silver;
}
body {
margin: 0;
}
.placeholder {
float: left;
height: 20px;
width: 30%;
background: var(--background);
border-bottom: 3px solid var(--accent);
}
.right {
float: right;
}
.container {
position: absolute;
left: 25%;
border-top: 50px solid var(--background);
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 40%;
}
.container-accent {
position: absolute;
left: 24.8%;
border-top: 53px solid var(--accent);
border-left: 53px solid transparent;
border-right: 53px solid transparent;
height: 0;
width: 40%;
transform: scale(1.008, 1.008);
}
<div class="placeholder"></div>
<div class="placeholder right"></div>
<div class="container-accent"></div>
<div class="container"></div>
Related
.step2 {
background-color: #f1f1f1;
color: #000;
margin: 0 -87px 0 33px;
padding: 30px 40px 0 40px;
height: 212px;
text-align: center;
}
.step2:before {
border-top: 40px solid transparent !important;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute;
right: -40px;
top: 0;
}
<div class="col-lg-3">
<div class="step2">
Step 1
</div>
</div>
I am developing a website but now I got stucked to achieve css for the Steps portion (Step 1, Step 2, Step 3) given in the image below :
This is the link for the image
Can anyone help me to achieve CSS ?
Play around with it and adjust the sizes and fonts according to your needs !
span{
position: absolute;
width : 100px;
margin-left: 30%;
margin-top: 40%;
}
.orange {
vertical-align: middle;
color: white;
position:relative;
background-color:#333;
height:100px !important;
width:100px !important;
z-index:3;
border-bottom-left-radius: 50%;
float: left;
margin-right:2px;
}
.orange:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
z-index:2;
margin-right:2px;
float: left;
}
.green:after {
content:'';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px #333;
}
.green:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
.blue {
color: white;
position:relative;
background-color: #333;
height:100px !important;
width:100px !important;
border-top-right-radius: 50%;
float: left;
}
.blue:after {
content:'';
position: absolute;
top: 100%;
left: 100%;
margin-left: 250px;
width: 0;
height: 0;
}
.blue:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
border-left: solid 15px white;
}
<div class="orange"><span>Step 1</span></div>
<div class="green"><span>Step 2</span></div>
<div class="blue"><span>Step 3</span></div>
For some reason there's space between my trapezoids.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(90deg);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform:rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Is there a way to remove the space without using negative margin?
Instead of making the trapezoid horizontally and then rotating, just make it the way you want it.
#trapezoid {
margin-top:20px;
border-left:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
#trapezoid2 {
margin-top:20px;
border-right:100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
It's because elements still keep it's DOM flow when you do transform:rotate(-90deg);. If you remove it, you will see that two divs actually touches. You can move second element to reduce gap.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg);
float: left;
/* Added code */
position: relative;
right: 140px;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
Do it without the rotating:
#trapezoid {
border-left: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
#trapezoid2 {
border-right: 100px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
height: 200px;
width: 0px;
float: left;
}
http://codepen.io/anon/pen/Wxzdrv
That gap is there because of width and transform: rotate, but you can use translateY to fix it.
#trapezoid {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(90deg) translateY(70px);
float: left;
}
#trapezoid2 {
margin-top: 100px;
border-bottom: 100px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 200px;
transform: rotate(-90deg) translateY(70px);
float: left;
}
<div id="trapezoid2"></div>
<div id="trapezoid"></div>
I was looking at css-tricks to see how to make a triangle with css. In the comments there was a question about how to give the triangle a border.
I thought I had a solution, but the results were unexpected. How come the right half of the inner triangle is missing.
#outer {
display: block;
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#inner {
display: inline;
margin: 0;
position: relative;
left: -40px;
top: -6px;
height: 0;
width: 0;
border-top: 40px solid green;
border-bottom: 0 solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
<div id="outer">
<div id="inner"></div>
</div>
If I change the inner triangle to have display: block or display: inline-block, the right half exists, but it's gone when then inner triangle has display: inline and I don't know why.
Strange, it works on Firefox and IE.
You can make it work on Chrome with
#inner::after {
content: '\200B';
}
#outer {
display: block;
height: 0;
width: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#inner {
display: inline;
margin: 0;
position: relative;
left: -40px;
top: -6px;
height: 0;
width: 0;
border-top: 40px solid green;
border-bottom: 0 solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
#inner::after {
content: '\200B';
}
<div id="outer">
<div id="inner"> </div>
</div>
I have the following CSS and HTML to make a 'triangle' div:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
<div class="arrow-right">
<p>next</p>
</div>
The problem is I want to have text (one word) inside the div (center of the triangle) but it breaks the triangle and put beside it.
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
position:relative;
}
.arrow-right p{
position: absolute;
top: -24px;
left: -50px;
}
<div class="arrow-right">
<p>next</p>
</div>
Do you want this output?
You can put only this css in p tag:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
left: 20px;
position: absolute;
top: 40px;
}
<div class="arrow-right">
<p>next</p>
</div>
The simplest way to achieve this is by positioning the element relative to its original position
.arrow-right {
position: relative;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: relative;
left: -50px;
top: -25px;
}
<div class="arrow-right">
<p>next</p>
</div>
Try with this below code...
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: absolute;
left: 15px;
top: 40px;
}
<div class="arrow-right">
<p> next </p>
</div>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
position: relative;
left: -48px;
top: -26px;
}
<div class="arrow-right">
<p>next</p>
</div>
Otherwise you can do like this. Add position:relative css rule to .arrow-right then write css rules for '.arrow-right p' as position:absolute;left: 15px;top: 40px;
I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom.
So far I have this:
HTML
<div class="css-shapes"></div>
CSS
.css-shapes{
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
}
http://jsfiddle.net/yhexkm4u/2/
However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white inside of this one, but everything got messy and didn't go as expected.
Maybe it is a wrong approach, but I want to end up with labels that would look something like this:
With CSS:
You can use CSS transforms on pseudo elements to create the background with a transparent inverted triangle at the bottom:
body{background:url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size:cover;}
p{
position: relative;
width: 150px; height: 150px;
overflow: hidden;
border-top:3px solid #EF0EFE;
}
p:before, p:after{
content: '';
position: absolute;
top: -3px;
height: 100%; width: 50%;
z-index: -1;
border:2px solid #EF0EFE;
box-sizing:border-box;
}
p:before{
left: 0;
transform-origin: 0 0;
transform: skewY(-20deg);
border-width:0 0 4px 3px;
}
p:after{
right: 0;
transform-origin: 100% 0;
transform: skewY(20deg);
border-width:0 3px 4px 0;
}
<p>Some text ... </p>
Note that you will need to add vendor prefixes on the transform and transform-origin properties to maximize browser support. See canIuse for more information.
With SVG
Another approach is to use an inline SVG with the polygon element:
body{background: url('http://lorempixel.com/image_output/food-q-c-640-480-1.jpg');background-size: cover;}
div{position: relative;width: 100px; height: 150px;}
svg{position: absolute;width: 100%;height: 100%;z-index: -1;}
<div>
<svg viewbox="-1.5 -1.5 103 153">
<polygon points="100 0, 100 100, 50 85, 0 100, 0 0" fill="transparent" stroke-width="3" stroke="#ef0efe"/>
</svg>
<p>Some text ... </p>
</div>
Here is a slightly different method using pseudo-elements and transform rotations to create an outlined banner like this:
This angled shape is created with position: absolute pseudo-elements, :before and :after:
The excess is cut off with overflow: hidden on the parent to form our banner:
The outline is created with box-shadow and the two angles are prevented from overlapping by pulling / pushing the x-axis by 46px — box-shadow: 46px 0 0 3px #000
Full Example
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,
div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
box-shadow: -46px 0 0 3px #000;
}
<div>Text</div>
STOLEN FROM CSS-SHAPES
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
DEMO:
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
<div id="flag"></div>
My Approach
My approach uses skewed elements, and allows you to quickly position them to your needs.
div {
height: 100px;
width: 100px;
position: relative;
border-left: 10px solid tomato;
border-top: 10px solid tomato;
border-right: 10px solid tomato;
text-align: center;
line-height: 100px;
font-size: 30px;
}
div:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
border-bottom: 10px solid tomato;
border-left: 10px solid tomato;
}
div:after {
content: "";
position: absolute;
height: 50%;
width: 50%;
right: -10px; /*width of border*/
bottom: -30px;
z-index: -2;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
border-bottom: 10px solid tomato;
border-right: 10px solid tomato;
}
div:hover, div:hover:before, div:hover:after{
background:lightgray;
}
<div>TEXT</div>
I've had a go at updating your CSS to create the effect you want:
.css-shapes {
height: 250px;
width: 0px;
border-left: 99px solid #f00fff;
border-right: 99px solid #f00fff;
border-bottom: 39px solid transparent;
position: relative
}
.n-shape {
height: 248px;
width: 0px;
border-left: 95px solid #ffffff;
border-right: 95px solid #ffffff;
border-bottom: 39px solid transparent;
position: absolute;
top: -6px;
right: -95px;
}
.top {
position: absolute;
top: 0px;
width: 198px;
height: 2px;
background-color: #f00fff;
left: -99px;
border-bottom: 1px solid #f00fff;
}
<div class="css-shapes">
<div class="n-shape"></div>
<div class="top"></div>
</div>
Fiddle: http://jsfiddle.net/dywhjwna/
Here is what I came up with.
Link Fiddle
It correspond to what you were looking for however I guess there should be a "better way" to it rather than playing with border.
HTML
<div id="text-div">
Text
</div>
<div id="pacman">
<div id="left-triangle"></div>
<div id="right-triangle"></div>
</div>
CSS
#text-div {
width: 118px;
height: 60px;
text-align: center;
border: 1px solid purple;
border-bottom: 0px;
line-height: 60px;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 0px;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
}
#left-triangle{
position: relative;
left: -59px;
border-right: 58px solid transparent;
border-top: 0px;
border-left: 58px solid white;
border-bottom: 58px solid transparent;
}
#right-triangle{
position: relative;
top: -59px;
left: -57px;
border-right: 58px solid white;
border-top: 0px;
border-left: 58px solid transparent;
border-bottom: 58px solid transparent;
}
A quick workaround is to rotate it:
transform: rotate(90deg);
Fiddle
Another solution would be an SVG path, here's a fiddle!.
A better solution with text easily positioned in the middle, using a rectangle background and a triangle at the bottom.
.css-shapes{
position: relative;
height: 250px;
width: 150px;
background: #FFD05B;
color: #fff;
text-align: center;
line-height:225px;
font-size: 90px;
box-sizing: border-box;
}
.css-shapes:after{
content: '';
position:absolute;
left:0;
bottom: 0;
display: block;
width: 100%;
height:50px;
border-bottom: 25px solid #fff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
box-sizing: border-box;
}
<div class="css-shapes">1</div>