body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 149%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1){
transform: rotate(0deg);
}
.box span:nth-child(2){
transform: rotate(90deg);
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
}
/* setting up one line */
.box span:before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
I created this CSS but the problem with my CSS is I am not able to get all four borders on end. I am managed to get 3 borders but the fourth border does not seem to fit properly. I was wondering if someone can guide me on how to arrange all four borders blue color at the end of the card. Could some one please guide or help to get proper animation. I would really appreciate some help on this.
Thank you in advance
Use two animation effects, Because the width and height are different, changing the Angle of the animation line is not on the edge.
body{
margin: 0;
padding: 0;
background-color: #073146;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before{
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1{
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p{
color: white;
}
.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(180deg);
}
/* setting up one line */
.box span:nth-child(odd):before{
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
.box span:nth-child(even):before{
content: '';
position: absolute;
height: 100%;
width: 2px;
background-color: #0093ff;
animation: animate2 4s linear infinite;
}
#keyframes animate {
0%{
transform: scaleX(0);
transform-origin: left;
}
50%{
transform: scaleX(1);
transform-origin: left;
}
50.1%{
transform: scaleX(1);
transform-origin: right;
}
100%{
transform: scaleX(0);
transform-origin: right;
}
}
#keyframes animate2 {
0%{
transform: scaleY(0);
transform-origin: bottom;
}
50%{
transform: scaleY(1);
transform-origin: bottom;
}
50.1%{
transform: scaleY(1);
transform-origin: top;
}
100%{
transform: scaleY(0);
transform-origin: top;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}.box span:nth-child(2){
transform: rotate(90deg);
right: -170px;
left: auto;
}
.box span:nth-child(3){
transform: rotate(180deg);
}
.box span:nth-child(4){
transform: rotate(270deg);
left: -170px;
}
I dont know if this is right or there is any other proper solution but this work for me. Thank you to the commentor to direct me in proper direction. I appreciate it
You need to set the width: property to the animation's full width underneath .box span, and then set its second and fourth nth-child's right: and left properties. Something like:
body {
margin: 0;
padding: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 180px;
background-color: #001e2d;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
}
.box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
}
.box:hover:before {
left: -50%;
transform: skewX(-5deg);
}
/* this controls the text inside the box */
.box .content {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
color: white;
font-size: 30px;
margin: 0 0 10px;
padding: 0;
}
.box .content p {
color: white;
}
.box span {
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 100%;
display: block;
box-sizing: border-box;
}
.box span:nth-child(1) {
transform: rotate(0deg);
}
.box span:nth-child(2) {
transform: rotate(90deg);
right: -87px;
left: auto;
}
.box span:nth-child(3) {
transform: rotate(180deg);
}
.box span:nth-child(4) {
transform: rotate(270deg);
left: -87px;
right: auto;
}
/* setting up one line */
.box span::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #0093ff;
animation: animate 4s linear infinite;
}
#keyframes animate {
0% {
transform: scaleX(0);
transform-origin: left;
}
50% {
transform: scaleX(1);
transform-origin: left;
}
50.1% {
transform: scaleX(1);
transform-origin: right;
}
100% {
transform: scaleX(0);
transform-origin: right;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
</body>
</html>
Here is a simplified version where you will need few lines of code. The whole animation can be done using background without extra elements:
body {
margin: 0;
background-color: #073146;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
background:
linear-gradient(#0093ff 0 0) 0 0,
linear-gradient(#0093ff 0 0) 100% 0,
linear-gradient(#0093ff 0 0) 100% 100%,
linear-gradient(#0093ff 0 0) 0 100%;
background-size:100% 2px,2px 100%;
background-repeat:no-repeat;
background-color: #001e2d;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 0, 0, 0.5);
overflow:hidden;
animation:animate 2s linear infinite;
}
#keyframes animate{
from {
background-size:0% 2px,2px 0%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50% {
background-size:100% 2px,2px 100%;
background-position:0 0,100% 0,100% 100%,0 100%;
}
50.1% {
background-size:100% 2px,2px 100%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
100% {
background-size:0% 2px,2px 0%;
background-position:100% 0,100% 100%,0 100%,0 0;
}
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transition: 0.5s;
pointer-events: none;
transform-origin:top;
}
.box:hover:before {
width:50%;
transform: skewX(-5deg);
}
.box .content {
margin:15px;
border: 2px solid #ffeb3b;
padding: 30px;
text-align: center;
color: white;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
}
.box .content h1 {
font-size: 30px;
margin: 0 0 10px;
}
<div class="box">
<div class="content">
<h1>Some heaading</h1>
<p>Three border is going perfect but the fourth border is messing up.</p>
</div>
</div>
Related question with a similar effect: Drawing border colors during a CSS transition
I'm trying to get this circle loader working properly but having difficulty. I can do some basic animations, but this code which I found on CodePen is a bit above my pay-grade. I'm trying to use it to understand what's happening.
My objective is that the loader doesn't go all the way around the circumference of the circle. Say, only 68% of the way and stops. Or 98%. But I'm thus far unable to locate the property/value which determines how far the loader goes around the circle.
I've tried manipulating the keyframes on the right loader class to no avail as well as the transform-origin property. No dice.
Code:
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
-webkit-transform-origin: 0 50% 0;
animation: loading-left 20s infinite linear;
-webkit-animation: loading-left 20s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
-webkit-transform-origin: 100% 50% 0;
animation: loading-right 20s infinite linear;
-webkit-animation: loading-right 20s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-left {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(180deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes loading-right {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes loading-right {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
<div class="container mt-5">
<div class="row">
<div class="col-3">
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
</div>
</div>
</div>
I am pasting a snippet below which does what you want.
I have written my explanation of what's going on directly into the code comments next to the css rules that are doing the corresponding animation.
In case anything is still unclear, post a comment.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#circle-loader-wrap {
overflow: hidden;
position: relative;
margin-top: -10px;
width: 200px;
height: 200px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
background-color: blue;
border-radius: 200px;
transform: rotate(180deg);
}
#circle-loader-wrap:after {
content: '';
position: absolute;
left: 15px;
top: 15px;
width: 170px;
height: 170px;
border-radius: 50%;
background-color: green;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#circle-loader-wrap div {
overflow: hidden;
position: absolute;
width: 50%;
height: 100%;
}
#circle-loader-wrap .loader {
position: absolute;
left: 100%;
top: 0;
width: 100%;
height: 100%;
border-radius: 1000px;
background-color: pink;
}
#circle-loader-wrap .left-wrap {
left: 0;
}
#circle-loader-wrap .left-wrap .loader {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50% 0;
animation: loading-left 5s infinite linear;
}
#circle-loader-wrap .right-wrap {
left: 50%;
}
#circle-loader-wrap .right-wrap .loader {
left: -100%;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
transform-origin: 100% 50% 0;
animation: loading-right 5s infinite linear;
}
#keyframes loading-left {
0% {
transform: rotate(0deg);
}
25%, 100% {
transform: rotate(180deg);
}
}
#keyframes loading-right {
0%, 25% {
transform: rotate(0deg);
}
50%, 100% {
/* the following is for the second half of the cicrle */
/* 180deg means one half of the cicle or 50% of the cicle */
/* So, 1% is gonna be 180/50 = 3.6deg */
/* If you want 68%, then you have 18% left for the second half of the circle */
/* To get 18%: 18x3.6 = 64.8deg */
transform: rotate(64.8deg);
/* Note: The transformation will happen between 25% and 50% of the total time which is 5 seconds in this case; So, it's gonna take 1.25 seconds. */
/* In other words, it will take the same amount of time as for the first half of the circle which will make the transformation in the second half appear to be slower because it has the same time to cover a much shorter distance */
/* Between 50% and 100% nothing happens. */
/* That's your "pause" in this animation although technically it's not a pause. */
}
}
</style>
<div class="container mt-1">
<div class="row">
<div class="col">
<p>68% in this case:</p>
<div id="circle-loader-wrap">
<div class="left-wrap">
<div class="loader"></div>
</div>
<div class="right-wrap">
<div class="loader"></div>
</div>
</div>
<p>The comments next to the corresponding css rules show how to adjust.</p>
</div>
</div>
</div>
Also note: I ripped out the vendor prefixes because you don't really need those nowadays for those css rules.
I want to insert a text below the single people's image.
This is my situation:
HTML:
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
CSS:
.background {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border 2.75s;
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
And this is what i want:
I tried to insert a div with the text after this but the over effect covers also the written like this:
Try to add text block after overlay
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
<div class="text-block">
/*here you text*/
</div>
Just add a div under each div-diviso and wrap in another div :)
.background {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border 2.75s;
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
.image-description {
width: 100%;
color: white;
text-align:left;
}
.duties-text {
color: blue;
font-size: 16px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso-container">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg" />
<div class="overlay">
</div>
</div>
<div class="image-description">
<h2>Silvia Feit</h2>
<span class="duties-text"> Responsible for some shinanigans</span>
</div>
</div>
</div>
</div>
I'm trying to create a circular menu with 6 radials using html and css. I only get 5 of the 6 total radials (borders). I need get the last radial, between item5 and item6. I need get the same of the picture:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
overflow: hidden;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I figured out a simple problem to get your line break in, albeit it is a little odd.
All I did was add an additional item without any content and then rotated it, gave it a background and transformed it into place.
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width: 1px;
height: 70px;
left: 68px;
top: 81px;
jsFiddle demo
The reason why you didn't have a white border there is because your item6 was rotated so it lined up with your item1, instead of it being rotated so it created the border between item5 and item6.
I tried rotating item6 so it created the border between itself and 5, but it caused it to overlap with item1, which just caused a never ending z-index loop in order to solve it
I'm trying to create a circular menu with radials using html and css, but the white borders are not built well. And it is not look fine in google chrome (not like a circle). I need get the last white radial, between item5 and item6. I have tried the next code:
DEMO
HTML
<div id="menu">
<div class="item1 item">
<div class="content">Solución Aula Digital</div>
</div>
<div class="item2 item">
<div class="content">Live Streaming</div>
</div>
<div class="item3 item">
<div class="content">Social Tecal Online</div>
</div>
<div class="item4 item">
<div class="content">FlexScorn</div>
</div>
<div class="item5 item">
<div class="content">Video On Demand</div>
</div>
<div id="wrapper6">
<div class="item6 item">
<div class="content">Video Colaboración</div>
</div>
</div>
<div id="center">
</div>
</div>
CSS
#menu {
background: #aaa;
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
}
#center {
position: absolute;
left: 60px;
top: 60px;
width: 180px;
height: 180px;
z-index: 10;
background: #FFFFFF;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
#center a {
display: block;
width: 100%;
height: 100%
}
.item {
background: #aaa;
overflow: hidden;
position: absolute;
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transition: background .5s;
-moz-transition: background .5s;
-webkit-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
border: 3px solid #FFFFFF;
}
.item:hover {
background: #eee
}
.item1 {
z-index: 1;
transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
width: 134px;
height: 134px;
}
.item2 {
z-index: 2;
transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
width: 150px;
height: 150px;
}
.item3 {
z-index: 3;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
width: 150px;
height: 150px;
}
.item4 {
z-index: 4;
transform: rotate(240deg);
-moz-transform: rotate(240deg);
-webkit-transform: rotate(240deg);
width: 152px;
height: 152px;
}
.item5 {
z-index: 5;
transform: rotate(300deg);
-moz-transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 151px;
height: 151px;
}
.item6 {
border: none;
position: absolute;
z-index: 6;
transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 140px;
height: 140px;
}
#wrapper6 {
position: absolute;
width: 160px;
height: 160px;
/*overflow: hidden;*/
transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
/*border: 2px solid #FFFFFF;*/
}
.item1 .content {
left: 0px;
top: 17px;
transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.item2 .content {
left: -5px;
top: 31px;
transform: rotate(-59deg);
-moz-transform: rotate(-59deg);
-webkit-transform: rotate(-59deg);
}
.item3 .content {
left: -40px;
top: 8px;
transform: rotate(-237deg);
-moz-transform: rotate(-237deg);
-webkit-transform: rotate(-237deg);
}
.item4 .content {
left: -43px;
top: 4px;
transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-webkit-transform: rotate(-240deg);
}
.item5 .content {
left: -52px;
top: 7px;
transform: rotate(-247deg);
-moz-transform: rotate(-247deg);
-webkit-transform: rotate(-247deg);
}
.item6 .content {
left: 26px;
top: -3px;
transform: rotate(-29deg);
-moz-transform: rotate(-29deg);
-webkit-transform: rotate(-29deg);
}
.content, .content a {
width: 100%;
height: 100%;
text-align: center
}
.content {
position: absolute;
}
.content a {
line-height: 100px;
display: block;
position: absolute;
text-decoration: none;
font-family: 'Segoe UI', Arial, Verdana, sans-serif;
font-size: 12px;
/*text-shadow: 1px 1px #eee;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
display: none;
text-align: center;
opacity: 0;
}
.display-target:target {
display: block;
opacity: 1;
animation: fade-in 1s;
-moz-animation: fade-in 1s;
-webkit-animation: fade-in 1s;
-o-animation: fade-in 1s;
-ms-animation: fade-in 1s;
}
#keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-webkit-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-o-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
I need get the six borders like this image :
Help, please!
Your border-radius was defined in px instead of %
JSfiddle
#menu {
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
This is the reason it's not being a circle in Chrome:
border-radius: 155px;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
You're defining a different border radius for Webkit and Mozilla than for everyone else. Use the same value in all three styles.
Also:
border-radius: 50%;
...will get you a circle no matter the size of the element.