I would like to know if it's possible to recreate the following image using css.
I am currently using it but in svg format.
Imagine this:
jsfiddle link
#circle {
background: #ccc;
border-radius: 50%;
/* Change these two equally to change circle size. Can be pixels, too. */
width: 25%;
padding-top: 25%;
height: 0;
position: relative;
}
.hand {
background: black;
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
}
.hand:nth-child(2) {
transform: rotate(90deg);
}
.hand:nth-child(3) {
transform: rotate(45deg);
}
.hand:nth-child(4) {
transform: rotate(135deg);
}
#circle:after {
content: '';
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background: white;
position: absolute;
top: 10%;
left: 10%;
}
<div id="circle">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/
Related
I need to create this custom shape with only CSS3.
Need to be with CSS, not svg.
I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate shapes properly.
Also can be only the center shape! I'm testing with this pen: https://codepen.io/Blumenkranz/pen/vYEeLjr
#mixin push--auto {
margin: {
left: auto;
right: auto;
}
}
#mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content;
display: $display;
position: $pos;
}
.section {
width: 100%;
height: 50vh;
background: $blue-dark;
position:relative;
&::after, &::before {
#include pseudo;
#include push--auto;
bottom: -46px;
left: 35%;
width: 250px;
height: 150px;
background: $blue-dark;
border-radius: 100%;
}
}
I don't know why you want to make this using only css, as svg would be much simpler, but here you go. I made an approximation of your shape, which you can easily adjust, using a similar technique to the one you linked.
Here is the code. I'm using display flex on the body and margin auto on the container to position it in the center of the page for display purposes.
body {
display: flex;
height: 100vh;
}
.container {
margin: auto;
position: relative;
}
.shape {
width: 200px;
height: 200px;
background-color: #157995;
transform: rotate(45deg) skew(-10deg,-10deg);
clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
border-radius: 15%;
}
.bar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 12px;
background-color: #157995;
}
.container::before, .container::after {
content: "";
position: absolute;
width: 50px;
height: 20px;
background-color: white;
z-index: 1;
bottom: 0px;
}
.container::before {
left: 12.4px;
border-top-right-radius: 50%;
transform: skew(55deg);
}
.container::after {
right: 12.4px;
border-top-left-radius: 50%;
transform: skew(-55deg);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bar"></div>
<div class="shape"></div>
</div>
</body>
</html>
A little bit late to the party here, but this was my effort using:
a transparent container (with a visible top border)
two background-coloured pseudo-elements inside the transparent container
a slim horizontal rectangle; and
a circle
Working Example:
.line {
position: relative;
height: 30px;
border-top: 1px solid rgb(0, 123, 149);
overflow: hidden;
}
.circle {
position: absolute;
top: -80px;
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: rgb(0, 123, 149);
border-radius: 50%;
}
.rectangle {
position: absolute;
top: -1px;
left: calc(50% - 64px);
width: 128px;
height: 12px;
background-color: rgb(0, 123, 149);
}
.line::before,
.line::after {
content: '';
position: absolute;
top: -1px;
z-index: 24;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
}
.line::before {
left: calc(50% - 110px);
}
.line::after {
right: calc(50% - 110px);
}
<div class="line">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
I would like to transform a div to apply it in front of a panel.
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;
but on bottom right the div doesn't fill to the background.
What is the css property to set it correctly ?
You can add skewX to your css.
I tried this and almost filled the shape :
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 641px;
height: 354px;
-webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
background-color: red;
This code fixes the bottom right corner and takes other answers into consideration:
.background {
position: relative;
width: 960px;
height: 720px;
background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.overlay {
position: absolute;
font-size: 28px;
top: 200px;
left: 149px;
width: 665px;
height: 395px;
-webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
background: linear-gradient(359.2deg, transparent 6%, red 6%)
}
<div class="background">
<div class="overlay"></div>
</div>
I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.
So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/
This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.
What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).
This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?
The CSS from the JSfiddle is:
html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
cursor: pointer;
}
.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
-o-transform:translate(1000%);
transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
-o-transform:translate(0, -1000%);
transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
-o-transform:translate(0, 1000%);
transform:translate(0, 1000%);
}
div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}
Thanks everyone,
Dave
Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/
One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.
HTML
<div id="wrapper">
<button id="movebtn">Move</button>
<div id="container">
<div class="box d1 active">1</div>
<div class="box d2 active">2</div>
<div class="box d3 active">3</div>
<div class="box d4 active">4</div>
<div class="box d5 active">5</div>
<div class="box d6 active">6</div>
<div class="box d7 active">7</div>
<div class="box d8 active">8</div>
<div class="box d9 active">9</div>
<div class="box d10 active">10</div>
</div>
</div>
JAVASCRIPT
$( "#movebtn" ).on('click', function() {
$('.box').toggleClass('active');
});
CSS
html,
body {
height:100%;
margin:0;
overflow: hidden;
width: 100%;
}
#wrapper {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
background-color: red;
border: 2px solid #000000;
box-sizing: border-box;
cursor: pointer;
height: 25%;
position: absolute;
transition-duration: 600ms;
}
.box.active {
transform: none;
}
.d1 {
width: 50%;
top: 0;
left: 0;
transform: translateY(-300%);
}
.d2 {
width: 50%;
top: 0;
left: 50%;
transform: translateY(-300%);
}
.d3 {
width: 25%;
top: 25%;
left: 0;
transform: translateX(-300%);
}
.d4 {
width: 25%;
top: 25%;
left: 25%;
transform: translateX(-400%);
}
.d5 {
width: 25%;
top: 25%;
left: 50%;
transform: translateX(400%);
}
.d6 {
width: 25%;
top: 25%;
left: 75%;
transform: translateX(300%);
}
.d7 {
width: 50%;
top: 50%;
left: 0;
transform: translateX(-200%);
}
.d8 {
width: 50%;
top: 50%;
left: 50%;
transform: translateX(200%);
}
.d9 {
width: 50%;
top: 75%;
left: 0;
transform: translateY(300%);
}
.d10 {
width: 50%;
top: 75%;
left: 50%;
transform: translateY(300%);
}
I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner.
The current css:
.hexagon.outer {
width: 318px;
height: 452px;
position: relative;
}
.hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
background-repeat:no-repeat;
background-color: #585858;
}
.hexagon.outer:before, .hexagon.outer:after {
content: "";
position: absolute;
width: 262px;
height: 262px;
top:95px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.5deg) skew(22.5deg);
transform: rotate(54.5deg) skew(22.5deg);
}
.hexagon.outer:before {
left: -130px;
}
.hexagon.outer:after {
left: 186px;
}
.hexagon.outer span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
.hexagon.inner {
width: 276px;
height: 372px;
position: relative;
margin:0 auto;
top: 40px;
z-index:4;
}
.hexagon.inner, .hexagon.inner:before, .hexagon.inner:after {
background-repeat:no-repeat;
background-color: white;
}
.hexagon.inner:before, .hexagon.inner:after {
content: "";
padding:0;
margin:0;
position: absolute;
width: 215px;
height: 215px;
top:79px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.7deg) skew(22.5deg);
transform: rotate(54.7deg) skew(22.5deg);
}
.hexagon.inner:before {
left: -107px;
}
.hexagon.inner:after {
left: 169px;
}
.hexagon.inner span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
The HTML:
<div class="hexagon outer">
<div class="hexagon inner">
</div>
</div>
Example: http://jsfiddle.net/jK7sH/
The outer hexagon will have an (background) effect in the end, that is why there are two (inner and outer).
I tried to align them by trial and error, but I don't think that works because the :before and :after rectangles are skewed.
Is it possible to create a symmetric hexagon with just CSS without the use of borders?
Thanks in advance for all information!
hexagone is 8 sides , isn't it ?
you could give a try with background linear-gradient
http://dabblet.com/gist/5767212
hover them to and see how it reacts while width increase.
Here's an example as an image:
I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.
You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.
live demo
HTML:
<div class='box'></div>
CSS:
.box {
position: relative;
margin: 10em auto 0;
width: 20em; height: 20em;
background: dimgrey;
}
.box:before, .box:after {
position: absolute;
transform-origin: bottom right;
content: '';
}
.box:before {
top: 0; right: 100%; bottom: 0;
width: 4em;
background: darkgrey;
transform: skewY(45deg);
}
.box:after {
right: 0; bottom: 100%; left: 0;
height: 4em;
background: silver;
transform: skewX(45deg);
}