Is it possible to make this shape with CSS? It can't be done with border radius, is there another way to 'bend' a rectangles sides?
As the other answers, the best way to make your shape perfect is using SVG. However with css3 and the help of pseudolements after and before You may have close shapes.
This one is far from good as I've made the FIDDLE as a fast example but with time you may get better results:
div {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: green;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
div:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
div:after {
content: '';
position: absolute;
bottom: 0px;
right: -11px;
width: 130px;
height: 120px;
background: green;
border-radius: 20% / 150%;
}
I don't think there's any widespread method for constructing shapes like that with pure css.
What you could try though is using inline svg:
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
This is just an example svg, you'll have to model your own. It also accepts base 64:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat;
Edit: I created a fiddle: https://jsfiddle.net/pm3czdhj/7/
You could also try looking into the css property clip-path.
Do some CSS like this will make the rectangle have curved edges:
div {
border: 2px solid;
border-radius: 25px;
}
Related
world {
width: 100%;
height: 100%;
position: absolute;
perspective:800px;
}
bg {
width: 100%;
height: 100%;
position: absolute;
z:1;
transform:rotateX(20deg) rotateY(10deg);
background: url(https://images.pexels.com/photos/1154498/pexels-photo-1154498.jpeg?auto=compress&cs=tinysrgb&h=1250);
}
layer_wrap {
width: 350px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
mix-blend-mode: overlay;
z:100;
perspective:500px;
transform-style:flat;
backface-visibility:hidden;
}
layer {
position:relative;
background: rgba(0, 122, 255,0.8);
padding: 20px;
color: #fff;
text-transform: uppercase;
font-family: "Arial";
font-size: 30px;
text-align: center;
transformOrigin:50% 50% 50%;
transform:translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(5deg) translateZ(0.001px);
}
<world>
<bg></bg>
<layer_wrap>
<layer>THIS IS A LAYER</layer>
</layer_wrap>
</world>
In the example the bg container and the layer_wrap container must be on the same level to be able to use mix-blend-mode and for other requirements of the Project.
The Results how it is rendered in Safari and Chrome are different. Safari cuts the half of the Layer rendering the whole world in one container. transformStyle preserve-3d or other Tricks were not helpful.
Also a transformZ is not the solution since it would change the size and distance to viewer.
Hope one of you guys have a good solution for this. Cheers !
I am desperately trying to code this Button:
Could anybody help me? Thanks.
I tried to make a simple button with box-shadow, a border and a transparent background but seems impossible.
So you can see in this other codepen that a tried an other approch with an :after and :before but nothing seems to work.
The best way I've found to do this is to use a pseudo element and apply the blurred border on that.
.border-shadow {
position: relative;
display: inline-block;
border: 3px solid #F01476;
padding: 20px;
background-color: transparent;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline: 3px solid #F01476;
filter: blur(2px);
transform: translateY(5px);
}
}
If you want a border gradient then you can do something like this:
.border-shadow {
position: relative;
display: inline-block;
padding: 20px;
background-color: transparent;
&:after {
content: '';
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
filter: blur(2px);
transform: translateY(5px);
}
&, &:after {
border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23F01476'/><stop offset='1' stop-color='%23F3590F'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
}
}
See the jsfiddle for both examples in action
Note: This is unprefixed CSS, so for proper browser support you'll want to apply appropriate prefixes. I advise using autoprefixer to handle this for you if possible.
I'm going crazy here, have tried almost everything (including the things mentioned in the two other older threads about this topic). I simply want to add images instead of the arrows.
Here is my code:
.fp-controlArrow {
position: absolute;
width: auto;
height: 200px;
z-index: 4;
top: 50%;
cursor: pointer;
}
.fp-controlArrow.fp-prev {
left: 15px;
background: url(../images/left.png) no-repeat;
}
.fp-controlArrow.fp-next {
right: 15px;
border-width: 38.5px 0 38.5px 34px;
border-color: transparent transparent transparent #fff;
}
Anybody who have got this to work? This should be easy but it isn't...
I have a button class styled in css, in which background image is used, like this:
.button {
display: block;
background-position: center;
background-size: 30px 28px;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
width: 100%;
background-image: url('foo.png');
}
The shape in .png is really simple - it's just an orange circle. So I want to draw it in css instead, to avoid using external asset. So I thought of using the following css object (which draws an orange circle):
#circle {
width: 100px;
height: 100px;
background: orange;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Is there some way to use that in such a way, that it would behave exactly as the background-image .png? (I know I could just make another button class in which I would have drawn the button differently but I want to reuse the button class already available).
This can be achieved using a pseudo element, I made a fiddle. You can play with the dimensions of course.
.button {
display: block;
border: 0;
width: 300px;
height: 200px;
position: relative;
background: transparent;
/* just to show where the button is */
border:1px solid #000;
}
.button:before {
content: '';
display: block;
background: orange;
border-radius: 50%;
height: 100px;
width: 100px;
/* make sure background is behind text */
z-index: -1;
/* center circle in button, negative margins = half of circle dimensions */
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
How about using SVG in a data URI? Here's a fiddle showing the example and the code used to generate it (the link is just 194 characters long):
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28">'
+ '<ellipse cx="15" cy="14" rx="15" ry="14" fill="orange"/></svg>';
location.href = 'data:image/svg+xml;base64,' + btoa(svg);
Is this possible to make with CSS? (Color is not important, just bottom side that is oval)
Try
background-color: #60a0d0;
border-bottom-left-radius:50% 10%;
border-bottom-right-radius:50% 10%;
(with appropriate browser prefixes)
You can get any curve with an ellipse or circle, placed behind the main block:
http://jsfiddle.net/e9RLQ/1/
.box {
position: relative;
background: #60a0d0;
}
.box:after {
position: absolute;
z-index: -1;
left: 0;
top: 100%;
width: 300%;
height: 300px;
margin: -292px 0 0 -100%;
background: #60a0d0;
border-radius: 50%;
content: "";
}
The drawback here is the complexity of adding gradient background.