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>
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 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>
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 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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Any idea how to create that shape in CSS an how to keep it always centered while resizing ??
The point is to use transforms and set the transform-origin on the "fixed" point, here top right so :
transform-origin:100% 0;
Then you can rotate or skew your element :
DEMO
HTML :
<div></div>
CSS :
body{
background:gold;
}
div{
position:absolute;
width:100%; height:100%;
right:50%; top:0;
background:teal;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
Not a perfect Solution and needs some modification but should do the trick:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
margin-left:-1000px;
width: 4000px;
height: 2000px;
background-color: yellow;
}
.arrow {
width: 0;
height: 0;
border-top: 2000px solid red;
border-right: 2000px solid transparent;
}
You can see it here: http://codepen.io/anon/pen/vsaLc
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;