I'm trying to make a div box with slanted edges but I just can't seem to manage it.
This is what im trying to get:
This with a colored (non solid) background.
Current CSS:
.infotop {
display: inline-block;
min-width: 30%;
min-height: 10%;
max-width: 50%;
margin: auto;
background-color: rgba(0, 190, 190, 0.6);
color: white;
text-align: center;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
text-shadow: 2px 2px 4px #000000;
}
Use gradient to create this:
.box {
display:inline-block;
padding:5px 30px;
font-size:25px;
color:#fff;
background:
linear-gradient(blue,blue) center/calc(100% - 40px) 100% no-repeat,
linear-gradient(to bottom left,blue 49%,transparent 50.5%) left/20px 100% no-repeat,
linear-gradient(to bottom right,blue 49%,transparent 50.5%) right/20px 100% no-repeat;
}
body {
background:pink;
}
<div class="box">
some text
</div>
Here is another way with clip-path
.box {
display:inline-block;
padding:5px 30px;
font-size:25px;
color:#fff;
background:blue;
-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}
body {
background:pink;
}
<div class="box">
some text
</div>
You might be able to use the technique show here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
I applied a 180 degree rotation to the trapezoid div in the example linked above. This gave the correct shape but also flipped the div's text upside down. I was unable to flip the text right side up again. See the comments below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
border-bottom: 100px solid blue; /* 100px is the height of the trapezoid */
border-left: 25px solid transparent; /* change angle by changing pixel value here*/
border-right: 25px solid transparent; /* change angle by changing pixel value here*/
transform: rotate(180deg); /* flip the trapezoid div */
height: 0;
width: 125px; /*width of the base */
}
.divtext
{
transform: rotate(180deg); /*this is not rotating the text for some reason*/
color: white; /* color of the text*/
}
</style>
</head>
<body>
<h2>Trapezoid CSS</h2>
<div class="trapezoid "><span class="divtext">Hello!</span></div>
</body>
</html>
Related
I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue:
https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
See this JsFiddle
http://jsfiddle.net/z3rLa/1/
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
That is the way I use:
CSS:
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
<img class="avatar" src="..">
create a new class:
.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
and this would be your html code:
<div class="circleborder"><img src="URL"/></div>
The HTML:
<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>
CSS:
.face {
border-radius: 100%;}
.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}
Thanks for your help guys! I'm testing my solution as we speak and sofar it's worked on Chrome & Safari on my Mac and iPhone! :D
http://www.css3.info/preview/rounded-border/
Border radius doesn't work the same way in every browser. You need different approaches.
Try this one it will be help for you.
.clip-circle {
clip-path: circle(60px at center);
/* OLD VALUE example: circle(245px, 140px, 50px); */
/* Yep, even the new clip-path has deprecated stuff. */
}
.clip-ellipse {
clip-path: ellipse(60px 40px at 75px 30px);
/* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
}
.clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* Note that percentages work as well as px */
}
Hello partners!
I wanted to see if someone could advise me on how to do the following:
In a webapp that I am making I have a stylized NavBar as seen in the photos (in AdobeXD it is shown as a union of a rectangle with a circle).
Nav Example AdobeXD | Complete View
How could I make that navbar with HTML / CSS?
I already have the following but I have the problem of how to merge the div of the rectangle and the div of the circle in order to have the same shadow and the same linear gradient, it is possible to do that? 🥺 or would it be better to export that nav as SVG?
body{
margin: 0;
}
.navContainer{
width:100vw;
}
.mainNav{
width:100vw;
background: linear-gradient(#30355e 0%, #383e6e 100%);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
height: 73px;
border-radius: 0 0 40px 40px;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.circleNav{
width:110px;
height:110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
position: absolute;
left: calc(50% - 57px);
top: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<html>
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
</html>
You can do it like below:
body {
margin: 0;
}
.navContainer {
width: 100vw;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
}
.mainNav {
background:
linear-gradient(#30355e 0%, #383e6e 100%)
top/100% 110px; /* 110px = height of circle */
height: 75px;
border-radius: 0 0 40px 40px;
}
.circleNav {
width: 110px;
height: 110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
margin: -75px auto 0; /* same as height of nav */
}
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
Or with a reduced code like below:
body {
margin: 0;
}
.navContainer {
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
height: 110px;
}
.navContainer::before,
.navContainer::after{
content:"";
position:absolute;
top:0;
height:100%;
border-radius: 50%;
background-image:linear-gradient(#30355e, #a3aae4);
}
.navContainer::before {
left:0;
right:0;
height:70%;
background-size:100% calc(100%/0.7);
background-position:top;
border-radius: 0 0 40px 40px;
}
.navContainer::after {
left:50%;
aspect-ratio:1/1; /* the support of this is low so you can replace it with width:110px */
transform:translate(-50%);
}
<div class="navContainer">
</div>
I'm trying to create a background for a banner using css where one side has a color and on the other side has another one with a 45° cut like this
I've been able to recreate the above image except for the drop shadow that doesn't stay in the right position.
Any advice would be greatly appreciated.
This is my code code:
#container {
height: 100px;
width: 400px;
overflow: hidden;
background-color: #2962ff;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #2196f3;
border-right: 400px solid transparent;
-webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
The CSS triangle trick with border can not be used for this, as a shadow will still be applied to the box, and not only to the triangle.
You will have to create a pseudo element, rotate it and THEN apply shadow to it.
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: inset 0 0 20px 10px #333;
}
<div id="container"></div>
Basically you create a rectangle which is larger than the parent, then rotate it and apply a shadow. You can tweak the colors and rotation-degree for your needs
Demo: http://jsfiddle.net/b5TnZ/2032/
You can add multiple color stops in Linear Gradients. Use two color set.
Gradient generated using Shapy
.canvas {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
min-height: 100%;
min-width: 100%;
}
.gradient-canvas {
max-height: 100%;
max-width: 100%;
width: 100%;
height: 100%;
background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat;
}
<div class="canvas"><div class="gradient-canvas"></div></div>
You can try gradient like below:
#container {
height: 150px;
background:
linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
And simply replace the deg with to bottom right if you want the diagonal result:
#container {
height: 150px;
width:50%;
background:
linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px));
background-color:#2196f3;
}
<div id="container">
</div>
I don't know if this is duplicated or not, but I searched but couldn't find anything.
I'm trying to do a div with a half circle in the middle of the top border like the picture bellow:
Th black square is a div (intended to be a modal) and in the middle the border is cut with a circle. The red part is the page background (can be anything... images, text...).
How can I do this in html/css? I'm trying to avoid images to do this!!
Thank you
You can try this...
body{
background-color:#333;
passing:0px;
height:0px;
}
#app{
background:#333 url('https://source.unsplash.com/random') no-repeat;
background-size:cover;
width:360px;
height:560px;
position:relative;
overflow:hidden;
}
.app-bar{
width:100%;
height:50px;
position:absolute;
bottom:0px;
left:0;
}
.app-bar .bar{
line-height:50px;
position:relative;
width:100%;
height:50px;
background-image: radial-gradient(circle 35px at 315px 0, transparent 700px, #f44336 50px);
}
.app-bar .bar i{
color:#FFF;
display:block;
line-height:50px;
float:left;
width:50px;
text-align:center;
cursor:pointer;
margin-top:0px;
}
.app-bar .bar i:hover{
background-color:rgba(0,0,0,.1);
}
.app-bar .bar button{
padding:0px;
box-sizing:border;
text-align:center;
margin:0px;
bordeR:0px;
outline:0px;
width:60px;
height:60px;
line-height:60px;
cursor:pointer;
color:#FFFFFF;
display:block;
border-radius:50%;
position:absolute;
top:-30px;
left:100%;
margin-left:-75px;
background-color:#f44336;
transition: all .2s ease;
}
.app-bar .bar button span{
line-height:60px;
font-size:30px;
}
.app-bar .bar button:hover{
transform:rotate(45deg);
transition: all .2s ease;
}
<div id="app">
<div class="app-bar">
<div class="bar">
<i class="material-icons">menu</i>
<i class="material-icons">search</i>
<button class="button">
<span class="material-icons">add</span>
</button>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >
One way of doing it:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}
body {
display: flex;
justify-content: center;
align-items: center;
background: #f00;
}
.black {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
background: #000;
}
.white {
position: relative;
top: -25px;
width: 50px;
height: 50px;
border: 2px solid #f00;
border-radius: 50%;
background: #fff;
}
<div class="black">
<div class="white"></div>
</div>
And the "starter kit" solution you'd like to have:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {height: 100%}
body {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom left, Navy, Tomato, Skyblue);
background-repeat: no-repeat;
background-attachment: fixed;
}
.outer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 275px;
height: 550px;
background: linear-gradient(Navy 33.33%, Tomato 66.66%, Skyblue 100%);
box-shadow: 0 15px 15px #000;
}
.outer > span {color:#fff}
.outer > .inner {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
position: relative;
padding-top: 20px;
width: 225px;
height: 275px;
border-radius: 5px;
background: #fff;
box-shadow: 0 10px 10px #000;
}
.outer > .inner > #user {
display: block;
position: absolute;
top: -35px;
width: 70px;
height: 70px;
border: 2px solid #fff;
border-radius: 50%;
background: Navy;
box-shadow: 0 0 0 10px Navy;
}
.outer > .inner > input[type=text],
.outer > .inner > #sign_in {
width: 80%;
padding: 5px;
}
.outer > .inner > #sign_in {
display: block;
padding: 10px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
background: Tomato;
box-shadow: 0 5px 5px #000;
}
<div class="outer">
<span>My Account</span>
<div class="inner">
<img src="http://www.ecovadis.com/wp-content/themes/ecovadis/images/Icon-user.png" alt="User" id="user">
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
Sign in
</div>
<span></span> <!-- just to make things easier -->
</div>
You can go on from here.
Thank you for all the help.
For my problem I found a solution in this post
here
and I adapted.
So for anyone that needs also the solution:
#wrapper {
width: 500px;
height:400px;
background: transparent;
border: 0;
/* Define half of half semi-cicle on the top for all */
background:
radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Safari 5.1- 6.0*/
background:
-webkit-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-webkit-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-webkit-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-webkit-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Opera 11.6-12.0*/
background:
-o-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-o-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-o-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-o-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*Define top half of half circle background for specific Firefox 3.6-15*/
background:
-moz-radial-gradient(circle at 0 100%, transparent 0, yellow 0) bottom left,
-moz-radial-gradient(circle at 100% 100%, transparent 0, yellow 0) bottom right,
-moz-radial-gradient(circle at 0 0, transparent 25%, yellow 15px) top right,
-moz-radial-gradient(circle at 100% 0, transparent 25%, yellow 15px) top left;
/*repeat half of half circle*/
background-size: 51% 51%;
background-repeat: no-repeat;
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content{
padding-top: 25%;
word-wrap: break-word;
}
<div id="wrapper" class="half-circle">
<div id="content">asdasdasdasdasdasdasdasdasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdassdasdadasasdasdasdasdasd</div>
</div>
I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue:
https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
See this JsFiddle
http://jsfiddle.net/z3rLa/1/
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
That is the way I use:
CSS:
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
<img class="avatar" src="..">
create a new class:
.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
and this would be your html code:
<div class="circleborder"><img src="URL"/></div>
The HTML:
<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>
CSS:
.face {
border-radius: 100%;}
.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}
Thanks for your help guys! I'm testing my solution as we speak and sofar it's worked on Chrome & Safari on my Mac and iPhone! :D
http://www.css3.info/preview/rounded-border/
Border radius doesn't work the same way in every browser. You need different approaches.
Try this one it will be help for you.
.clip-circle {
clip-path: circle(60px at center);
/* OLD VALUE example: circle(245px, 140px, 50px); */
/* Yep, even the new clip-path has deprecated stuff. */
}
.clip-ellipse {
clip-path: ellipse(60px 40px at 75px 30px);
/* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
}
.clip-polygon {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* Note that percentages work as well as px */
}