I would like to know how I can make this top border in css and how it is called because i have no idea.
I tried messing with ::before and ::after but it simply wont look good.
.container {
margin-top: 50px;
background: grey;
width: 60%;
height: 300px;
border-radius: 10px;
position: relative;
}
.container:after {
content: '';
background: red;
width: 50%;
height: 100%;
position: absolute;
border-top-right-radius: 15px;
transform: rotate(-3deg);
}
<div class="container"></div>
You can use clip-path and polygon to create triangle on top. Use left and width property wisely so you dont see the left and right part of the traingle.
See the Snippet below:
.container {
margin-top: 50px;
background: #FFCC00;
width: 60%;
height: 300px;
border-radius: 10px;
position: relative;
}
.container:before{
content: '';
position: absolute;
display: block;
left: 2.5%;
top: -20px;
bottom: 0;
width: 95%;
height: 20px;
background: #FFCC00;
-webkit-clip-path: polygon(50% 30%, 0 100%, 100% 100%);
clip-path: polygon(50% 30%, 0 100%, 100% 100%);
}
<div class="container"></div>
You have two ways to do it
and you can learn how to make triangle here
https://www.w3schools.com/howto/howto_css_shapes.asp
I was able to make it using clip path.
This is the tool that I've used: https://bennettfeely.com/clippy/
Related
As such: https://i.stack.imgur.com/UdHNE.png
CSS border, clip path, etc?
I've tried the following:
div#box{
width: 38px;
height: 500px;
border: 13px solid black;
border-color: transparent black transparent transparent;
border-radius: 0 100% 100% 0;
}
<div id="box"></div>
But it's not giving me the result I'm looking for (the curve is too subtle).
I've also tried using clip path but the transparent element won't "cut" into the other one obviously since it's transparent.
body {
background-color: lightblue;
}
.one {
height: 500px;
width: 38px;
background-color: white;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: 50%;
top: 0;
}
.two {
height: 500px;
width: 38px;
background-color: transparent;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: calc(50% + 13px);
top: 0;
}
<div class="one"></div>
<div class="two"></div>
Any help would be greatly appreciated.
Can you please try this and only play with second[180%] and third[-2%] value.
In here we create a required clip-path than we create another div which will create us a middle space and aplly position: absolute ,overflow:hidden to create same clip-path in red div and than we set background-color of middle div as same as screens background-color.
z-index are need to be .one > .middle > .two
clip-path: ellipse(100% 180% at -2% 50% )
body {
position: relative;
min-height: 100vh;
display: flex;
place-items: center;
background-color: bisque;
}
.one{
position: relative;
height: 500px;
width: 500px;
background-color: green;
clip-path: ellipse(100% 180% at -2% 50% ) ;
z-index: 3;
}
.middle{
position: absolute;
z-index: 2;
height: 500px;
width: 500px;
clip-path: ellipse(100% 180% at -2% 50% ) ;
left:25px;
overflow: hidden;
background-color: bisque;
}
.two{
position: relative;
z-index: 1;
right:25px;
height: 500px;
width: 500px;
background-color: red;
}
<div class="one"></div>
<div class="middle"></div>
<div class="two"></div>
This question already has answers here:
CSS Cut out circle from a rectangular shape
(3 answers)
Closed 1 year ago.
Can anyone help me with how to get the style like in the image attached below using background colour for a div? I tried adding using pseudo-classes before and after but doesn't seem to be coming through.
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #070B32;
position: absolute;
content: "";
left: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
.card:after {
background: #070B32;
position: absolute;
content: "";
right: 0;
height: 50px;
border-radius: 50% 50% 0 0;
}
<div class="card">
</div>
Use width top values too to have semi-circles with a change in color
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: white;
position: absolute;
content: "";
left: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 0 150px 150px 0;
}
.card:after {
background: white;
position: absolute;
content: "";
right: 0;
top:35%;
width: 25px;
height: 50px;
border-radius: 150px 0 0 150px;
}
<div class="card">
</div>
Update:
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at left center, transparent, transparent 30px, #070B32 30px, transparent), radial-gradient(circle at right center, transparent, transparent 30px, #070B32 30px, transparent);
border-radius: 8px;
position: relative;
width: 360px;
margin: auto;
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
</div>
you should use width: 50px, background-color: white;
and responsive vertical alignment:
top: 50%; transform: translateY(-50%);
.card {
height: 190px;
background: #070B32;
width: 360px;
position: relative;
}
.card:before {
background: #ffffff;
position: absolute;
content: "";
left: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
.card:after {
background: #ffffff;
position: absolute;
content: "";
right: -25px;
top: 50%;
transform: translateY(-50%);
height: 50px;
width: 50px;
border-radius: 50%;
}
<div class="card">
</div>
Or just use a background.
.card {
--circle-color: #fff;
--circle-size: 50px;
background: radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(100% + (var(--circle-size) / 2)) 50% / var(--circle-size) var(--circle-size),
radial-gradient(farthest-side circle, var(--circle-color) 97%, transparent) calc(var(--circle-size) / -2) 50% / var(--circle-size) var(--circle-size),
#070B32;
background-repeat: no-repeat;
height: 190px;
width: 360px;
}
<div class="card">
</div>
I'm trying to create a reusable widget. It will have some sort of background image, with a transparent text overlay. The background of the text overlay will be mostly square, but have one transparent corner. Is there an easy way to do this using CSS?
You can use linear-gradient background. Here is your reusable widget. Cheers!
img {
display: block;
width: 100%;
}
.img-widget {
width: 250px;
height: auto;
position: relative;
}
.img-widget .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: transparent;
text-align: center;
background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%);
display: inline-block;
vertical-align: middle;
}
.img-widget .overlay:after {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
<div class="img-widget">
<img src="http://placehold.it/200x200" />
<div class="overlay">Some text here</div>
</div>
#green-overlay {
background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.5) 0) top left;
add the rest of your css for this element
}
Something like this should work. Just replace the rgba value and 30px with how deep you want the corner.
https://jsfiddle.net/snavy/acbo36n2/
Try something like the following (LIVE PEN HERE):
HTML
<div class="row">
This div has a background image
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
CSS
html, body {margin: 0; padding: 0;}
#rightDivider {
width: 80%;
height: 100px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 100px 60px;
border-color: transparent transparent blue transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
.row {
background: orange;
position: relative;
height: 300px;
padding: 0;
margin: 0;}
You could try using css3's -webkit-clip-path: polygon(); attribute to solve your issue.
See reference here: CSS3 clip-path
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;
I am trying to create a footer according to a design I received ...
The background color on the left is different from the right one:
I have the following markup:
<div class"wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
My idea is Content DIV to have the logo as background image aligned left and no repeat.
But then I don't know how to create the different color on left and right ...
And I am not sure if I can control the height so that everything aligns.
The content div is centered and has the orange border on the image ...
Thank You,
Miguel
Try this http://codepen.io/nicknameless/pen/cblzB/
I've used CSS3 and no additional markup. This should work for you. It could be cleaned up I think, this is just a quick overview to get you started.
The HTML you provided
<div class="wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
The CSS
html, body {
padding: 0;
margin: 0;
}
div.wrapper {
height: 40px;
background: #850000;
width: 100%;
display: block;
position: relative;
overflow: visible;
top: calc( 100px - 40px );
}
div.wrapper:before {
background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
content: " ";
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
}
div.content {
left: calc( 10% + 100px );
padding-left: 10px;
bottom: 0;
background-color: #C70000;
display: block;
height: 40px;
position: absolute;
width: calc( 100% - ( 10% + 100px ) );
}
It's was really a pain in the ass, I recommend to take the inner rectangle as a picture, but if you really want it in CSS, here it's: http://jsfiddle.net/B97ym/
HTML:
<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
<div class='border2'></div>
<div class='border3'></div>
<div class='logodiv'>
<div class='rectangle'></div>
</div>
</div>
CSS:
.wrapper {
width: 500px;
height: 50px;
margin: 100px auto;
position: relative;
background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}
.content{
margin: 0 0 0 50%;
color: #ffffff;
}
.border{
width: 4em;
height: 4em;
background: #FF0000;
position: absolute;
left: 33.7%;
top: -55%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}
.border2{
width: 0.8em;
height: 4em;
background: #9c9e9f;
position: absolute;
left: 80%;
}
.border3{
width: 0.8em;
height: 0.85em;
background: #000000;
position: absolute;
left: 80%;
top: 80%;
}
.logodiv {
width: 2.5em;
height: 2.5em;
background: #ffffff;
position: absolute;
top: 18%;
left: 18%;
}
.rectangle{
width: 2.1em;
height: 2.1em;
position: relative;
background: #ffffff;
top: -42%;
left: -42%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
Hope it's will be helpful to someone (:
Use a CSS background-image on the wrapper layer that contains the entire logo, bars an all. Add enough margin-left on the inner layer to shove the text beyond the logo.
Create a div with two div's inside with 50% width for left and right and fixed height. Make sure you overflow the logo.
I wonder if this FIDDLE will give you a place to start.
CSS
.holder {
width: 500px;
margin: 100px auto;
position: relative;
}
.leftdiv {
width: 40%;
height: 60px;
float: left;
background-color: red;
}
.rightdiv {
width: 60%;
height: 60px;
float: left;
background-color: blue;
}
.logodiv {
width: 44px;
height: 44px;
position: absolute;
left: 157px;
top: -42px;
background-color: white;
transform: rotate(45deg);
border-left: 20px solid blue;
border-right: 20px solid red;
border-top: 20px solid red;
border-bottom: 20px solid blue;
}
.whiteout {
background-color: white;
width: 30px;
height: 60px;
border: 0px solid black;
position: absolute;
top: -60px;
left: 183px;
}