Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i want to code a box like this
and completely using css and other web language ,
not the thing like svg ,
is it possible ?
it is simple when it's cuppy
but the problem is when convex
may some one help me?
The .rect::after has border-radius: 50% and a very long white shadow that will be visible only inside the .rect since the .rect element has overflow:hidden.
For the rect's shadow I'm using filter:drop-shadow(1px 1px 3px #000)
.rect {
position: relative;
height: 100px;
width: 300px;
margin:2em auto;
overflow:hidden;
filter:drop-shadow(1px 1px 3px #000)
}
.rect::after {
content: '';
border-radius: 50%;
background:transparent;
box-shadow: 0 0 0 60vw white;
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:-25px;
}
<div class="rect"></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
How should I animate text (with writing-mode set to vertical-rl) background in CSS to increase its height when you hover over it? Something like this: https://youtu.be/A_ZS3aE_8Bw
Thanks!
#text {
--width: 2rem;
font-size: var(--width);
writing-mode: vertical-rl;
position: relative;
}
#text::before {
content: "";
position: absolute;
width: var(--width);
height: 0;
background-color: red;
z-index: -1;
transition: all 0.3s ease-in-out;
}
#text:hover::before {
height: 10rem;
}
<div id="text">hello world!</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to code a striped triangle in CSS, which will be a resize icon as you can normally find in the lower right of a window such as this one:
I tried using repeating-linear-gradient and creating a triangle with the div-border trick, but I can't combine those, as the triangle is made from borders, and the gradient is for background.
So how do I get a div that looks like the image? I can't find anything helpful on google or here on stackoverflow.
Any help is highly appreciated :)
I would use box shadow on pseudo element to create 3 strips, and rotate it to bottom right corner
.strip_tri {
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
}
.strip_tri::after {
content: '';
position: absolute;
display: block;
width: 50px;
height: 0;
box-shadow: 0 10px 0 1px black, 0 17px 0 1px black, 0 24px 0 1px black;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
top: 50%;
left: 50%;
}
<div class="strip_tri"></div>
I used the links you provided to make this:
#a {
background: repeating-linear-gradient( -45deg, #fff, #fff 2px, #000 2px, #000 3px);
width: 20px;
height: 20px;
}
#b {
width: 0;
height: 0;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-top: 25px solid #fff;
}
<div id="a">
<div id="b">
</div>
</div>
Of course, you can change the size of the div and the stripes to whatever you please.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
How can i create css figure? I need something like on image.
May be online service, but i didn't find. It's a heavy figure, that's why I'm asking. Also, lateral colored figures I will need to change color.
IMAGE
If I understood your question correctly, here is a example how you can reach the goal.
button.figure {
border: none;
padding: 8px;
color: #2F2F2F;
font-size: 18px;
border-radius: 10px / 50%;
min-width: 100px;
position: relative;
margin-left: 20px;
}
button.figure:before,
button.figure:after {
content: "";
width: 50px;
height: 100%;
position: absolute;
top: 0;
border-radius: 10px/50%;
z-index: -1;
}
button.figure:before {
background: red;
margin-left: -6px;
left: 0;
}
button.figure:after {
background: green;
margin-right: -6px;
right: 0;
}
<button class="figure">Button</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
is possible to draw CSS shape like (Not necessarily exact):
Thanks
it will be much better with SVG I think, or just using photoshop to make a .png
But using css for sure you can do it
.the1 {
position: fixed;
background-color:white;
width:100%;
left: -15%;
height:100%;
top: 12%;
border-top-left-radius:50%;
border-top-right-radius:100%;
}
.the2 {
position: fixed;
background-color: white;
width:100%;
left: 15%;
height:100%;
top: 12%;
border-top-left-radius:100%;
border-top-right-radius:10%;
}
.the3 {
position: fixed;
background-color: red;
width:50%;
left: 52%;
height:32%;
top:3%;
border-bottom-left-radius:100%;
border-bottom-right-radius:50%;
}
body{
background: red;
}
<div class="bg">
<div class="the1">
</div>
<div class="the2"></div>
<div class="the3"></div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to make border-bottom inside block after hover event?
I tried this using text-shadow, but seems it is not solution
An inset box shadow seems to be what you require
div {
height: 75px;
background: #c0ffee;
}
div:hover {
box-shadow: inset 0 -5px 0 red;
}
<div></div>
OR
Use a pseudo-element
div {
height: 75px;
background: #c0ffee;
position: relative;
}
div:hover::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 5px;
background: red;
}
<div></div>