How do you achieve this kind thing on the bottom of a div in CSS?
I try
&:before {
content: '';
position: absolute;
z-index: 2;
width: 133.93px;
height: 93.63px;
border-radius: 5px;
border: 1px solid #ffffff;
box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
background-image: $gradeint;
text-align: center;
transform-origin: center;
transform: rotateZ(45deg);
top: -10%;
right: 0;
}
but that not something I want
You can achieve something like the shape using the clip-path property. Here's an example.
The purple area actually covers the whole container, but the clip-path set on it clips it to the polygon defined by the points 0 0, 100% 0, 35% 60%, 0 0 where 0, 0 is the top-left corner of the container and 100%, 100% would be the bottom-right corner.
.container {
width: 300px;
height: 200px;
border: 1px solid black;
position: relative;
display: flex;
}
.accent {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: purple;
clip-path: polygon(0 0, 100% 0, 35% 60%, 0 0);
}
.image {
width: 125px;
height: 125px;
background-color: lightgray;
border-radius: 125px;
margin: auto;
z-index: 1;
}
<div class="container">
<div class="accent"></div>
<div class="image"></div>
</div>
Related
As I'm not expert in CSS, requesting help everyone. am trying to create speech bubble like below. but i could only able to get oval shape. I don't know how add tail on top right corner.
I've gone through all SO solution but don't know which CSS property need to change to make top right tail as per below image.
html
<div class="bubble-wrapper">
<div class="flat-oval"></div>
</div>
CSS
.flat-oval {
border: 1px solid green;
width: 160px;
height: 80px;
background-color: green;
border-radius: 50%;
position: relative;
left: 0%
}
.bubble-wrapper{
border: 1px solid red;
text-align: center;
}
that tail should be bit long and lean.
Thanks to all
do it like below:
.speech {
width: 200px;
height: 100px;
border-radius: 100%;
background: red;
margin: 50px;
position: relative;
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}
.speech:before {
content: "";
position: absolute;
top: -15%;
left: -10%;
border-radius: 100px 100px 0 0;
width: 60px;
height: 30px;
box-shadow: 20px 0 0 red;
}
<div class="speech"></div>
Well, you can use clip-path property in case of creating that tail thing. Using clip-path you can create any kind of shape you want. Here is some link that might help to learn more about clip-path.
similar kind of project: https://freefrontend.com/css-speech-bubbles/
clip-path documentary: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
I hope Its useful to you..
.bubble-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-70%, -50%);
width: 80vmin;
height: 80vmin;
}
.bubble-wrapper div {
position: absolute;
box-sizing: border-box;
}
.b {
border: 0.5vmin solid black;
}
.r {
border-radius: 100%;
}
.hb::before,
.ha::after {
content: "";
display: block;
position: absolute;
}
.bubble {
width: 40%;
height: 25%;
left: 73%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 5vmin;
background: #ffd;
box-shadow: 0 -0.25vmin, 0 0.125vmin;
font-family: "Comic Sans", "Comic Neue", sans-serif;
}
.bubble::before {
width: 40%;
height: 250px;
bottom: -10px;
border-radius: 50%;
left: -60px;
box-shadow: 0.5vmin 0, 3vmin -1vmin #ffd, 3vmin -1vmin 0 0.5vmin;
clip-path: polygon(0% 49%, 150% 51%, 150% 100%, 0% 100%);
transform: rotateZ(-210deg) scaleX(-1);
}
<div class="bubble-wrapper">
<div class="bubble b r hb">Hello....</div>
</div>
This question already has answers here:
border curved css - circle with curved end
(2 answers)
Closed 3 years ago.
I'm trying to create something that looks like a mobile phone with HTML and CSS and I'd like the camera to have something like an "inverted border-radius" that connects it with the frame smoothly.
I can't just make it bigger and mask the unwanted area with a pseudoelement with a white background because the screen content might not always be white.
Also, I can't use mask-image on that same element because that "inverted border-radius" would actually extend past it's bounding box, so I would actually be adding more area rather than subtracting (plus support is really low).
I want to avoid using SVGs if possible.
body {
position: relative;
overflow: hidden;
height: 100vh;
margin: 0;
}
.phone {
width: 420px;
height: 800px;
padding: 12px 12px 24px;
position: absolute;
top: 32px;
left: 50%;
transform: translate(-50%, 0);
background: #000;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .125);
border-radius: 16px;
}
.screen {
height: 100%;
overflow: hidden;
position: relative;
background: #FFF;
border-radius: 8px;
}
.viewport {
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
}
.notch {
top: 12px;
left: 50%;
width: 24px;
height: 12px;
z-index: 10;
position: absolute;
transform: translate(-50%, 0);
background: #000;
border-bottom-left-radius: 1024px;
border-bottom-right-radius: 1024px;
}
.camera {
top: 0;
left: 50%;
width: 12px;
border: 4px solid #33244A;
height: 12px;
position: absolute;
transform: translate(-50%, -50%);
background: #304A58;
border-radius: 1024px;
box-sizing: border-box;
}
<div class="phone">
<div class="notch">
<div class="camera"></div>
</div>
<div class="screen">
<div class="viewport"></div>
</div>
</div>
There are four ways to do that, from simple to more complex:
Adding 2 pseudoelements with radial-gradient.
Simplest and well-supported solution. Probably the one I would use.
Adding 2 pseudoelements with mask-image (same as above, but with worse support).
Quite similar, code-wise, to the previews one, but with really bad support (needs browser prefixes for those that support it).
Adding 2 pseudoelements with a border-radius, box-shadow and background: transparent.
Needs a bit more code, but it looks a bit smoother, at least on Chrome Version 78.0.3904.108, so maybe it's worth it for you, although the difference is minimal. In any case, the shapes you can do can't be as complex as with the previous alternatives, especially if you want to work with ellipses rather than circles, like in this other question: https://stackoverflow.com/a/59278227/3723993.
Using an SVG.
I think the SVG solution is not worth it here, but it would be a good alternative for more complex shapes or animated/transitioning shapes.
Here you can check the first 3 solutions:
const notch = document.getElementById('notch');
const button = document.getElementById('button');
const xrayCheckbox = document.getElementById('xrayCheckbox');
const xrayLabel = document.getElementById('xrayLabel');
const label = document.getElementById('label');
const solutions = [{
name: 'pseudoelements + radial-gradient',
classes: 'notch notch-gradient'
}, {
name: 'pseudoelements + box-shadow',
classes: 'notch notch-shadow'
}, {
name: 'pseudoelements + mask-image',
classes: 'notch notch-mask'
}];
let currentSolutionIndex = 0;
let currentSolution = solutions[currentSolutionIndex];
let xRayEnabled = false;
button.onclick = () => {
currentSolutionIndex = (currentSolutionIndex + 1) % solutions.length;
currentSolution = solutions[currentSolutionIndex];
updateLabels();
};
xrayCheckbox.onchange = () => {
xRayEnabled = xrayCheckbox.checked;
updateLabels();
};
function updateLabels() {
if (xRayEnabled) {
notch.className = `${ currentSolution.classes }-xray`;
label.innerText = `${ currentSolution.name } (X-Ray)`;
xrayLabel.innerText = 'Disable X-Ray';
} else {
notch.className = currentSolution.classes;
label.innerText = currentSolution.name;
xrayLabel.innerText = 'Enable X-Ray';
}
}
body {
position: relative;
overflow: hidden;
height: 100vh;
margin: 0;
}
.phone {
width: 420px;
height: 800px;
padding: 12px 12px 24px;
position: absolute;
top: 32px;
left: 50%;
transform: translate(-50%, 0);
background: #000;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .5);
border-radius: 16px;
}
.screen {
height: 100%;
overflow: hidden;
position: relative;
background: #FFF;
border-radius: 8px;
}
.viewport {
height: 100%;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
}
.notch {
top: 12px;
left: 50%;
width: 24px;
height: 12px;
z-index: 10;
position: absolute;
transform: translate(-50%, 0);
background: #000;
border-bottom-left-radius: 1024px;
border-bottom-right-radius: 1024px;
}
.notch::before,
.notch::after {
top: 0;
width: 8px;
height: 8px;
content: "";
position: absolute;
}
.notch-gradient-xray,
.notch-shadow-xray,
.notch-mask-xray {
background: red;
}
/* RADIAL GRADIENT SOLUTION */
.notch-gradient::before {
left: -6px;
background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
}
.notch-gradient::after {
right: -6px;
background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
}
.notch-gradient-xray::before {
left: -6px;
background: green radial-gradient(circle at bottom left, transparent 0, transparent 70%, cyan 70%, cyan 100%);
}
.notch-gradient-xray::after {
right: -6px;
background: green radial-gradient(circle at bottom right, transparent 0, transparent 70%, cyan 70%, cyan 100%);
}
/* BOX-SHADOW SOLUTION */
.notch-shadow::before {
left: -6px;
background: transparent;
border-radius: 0 8px 0 0;
box-shadow: 0 -4px 0 0 #000;
}
.notch-shadow::after {
right: -6px;
background: transparent;
border-radius: 8px 0 0 0;
box-shadow: 0 -4px 0 0 #000;
}
.notch-shadow-xray::before {
left: -6px;
background: green;
border-radius: 0 8px 0 0;
box-shadow: 0 -4px 0 0 cyan;
}
.notch-shadow-xray::after {
right: -6px;
background: green;
border-radius: 8px 0 0 0;
box-shadow: 0 -4px 0 0 cyan;
}
/* MASK SOLUTION */
.notch-mask::before {
left: -6px;
background: #000;
-webkit-mask-image: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
}
.notch-mask::after {
right: -6px;
background: #000;
-webkit-mask-image: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
}
.notch-mask-xray::before {
left: -6px;
background: cyan;
-webkit-mask-image: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
}
.notch-mask-xray::after {
right: -6px;
background: cyan;
-webkit-mask-image: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
}
.camera {
top: 0;
left: 50%;
width: 12px;
border: 4px solid #33244A;
height: 12px;
position: absolute;
transform: translate(-50%, -50%);
background: #304A58;
border-radius: 1024px;
box-sizing: border-box;
}
#button {
font-family: monospace;
font-size: 16px;
padding: 8px 16px;
margin: 32px auto 16px;
background: transparent;
border: 2px solid black;
display: block;
border-radius: 2px;
}
#xray {
font-family: monospace;
font-size: 16px;
padding: 0 16px;
text-align: center;
display: block;
margin: 0 0 16px;
display: flex;
align-items: center;
justify-content: center;
}
#xrayCheckbox {
margin: 0 8px 0 0;
}
#label {
font-family: monospace;
font-size: 16px;
padding: 0 16px;
text-align: center;
}
<div class="phone">
<div id="notch" class="notch notch-gradient">
<div class="camera"></div>
</div>
<div class="screen">
<div class="viewport">
<button id="button">Change Solution</button>
<label id="xray">
<input id="xrayCheckbox" type="checkbox" />
<span id="xrayLabel">Enable X-Ray</span>
</label>
<div id="label">pseudoelements + radial-gradient</div>
</div>
</div>
</div>
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
Hi i'm trying to create a cross browser css triangle mask that also works in ie10.
heres what i have http://codepen.io/adamjw3/pen/RoxrNJ but it doesn't work in ie.
Any other way of doing this?
.slider {
-webkit-clip-path: polygon(0 0, 68% 81%, 100% 0);
clip-path: polygon(0 0, 68% 81%, 100% 0);
overflow: hidden;
margin: 0 auto;
width: 30%;
}
img {
height: 100%;
width: 100%;
max-width: 100%;
}
Its is not supported in IE. You can think of a different approach. Why don't you make a triangle via css and keep image inside it ?
More info here
http://caniuse.com/#search=clip-path
UPDATE: Another concept for triangle
.box1 {
width: 232px;
height: 180px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.box2 {
position: relative;
overflow: hidden;
transform: rotate(45deg) skew(10deg, 10deg);
border-left: 1px solid #000;
border-top: 1px solid #000;
width: 200px;
height: 200px;
margin: 81px 0 0 16px;
}
.box2_bg {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg);
background-size: 100%;
background-position: center top;
transform: skew(-10deg, -10deg) rotate(-45deg);
transition: .3s;
background-size: 50%;
}
.box2_bg:hover {
background-size: 90%;
}
<div class="box1">
<div class="box2">
<div class="box2_bg"></div>
</div>
</div>
You can play with this.
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100