Как мне создать логотип, в соответствии с прикрепленным ниже изображением.
Это то, что я создал: JsFiddle
Основная проблема заключается в том, - как можно соединить два блока с фигурой, как показано на рисунке ниже.
Может кто-нибудь, пожалуйста, предложить, как это сделать?
body,html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation: dance 888ms infinite alternate;
}
.block-1 {
top: 0;
left: 0;
background: #0076aa;
border-radius: 4px;
}
.block-2 {
top: 0;
right: 0;
background: #98bd81;
border-radius: 4px;
}
.block-3 {
bottom: 0;
right: 0;
background: #98bd81;
border-radius: 4px;
}
.block-4 {
bottom: 0;
left: 0;
background: #0076aa;
border-radius: 4px;
}
Перевод вопроса: Connecting rounded squares @Sanjeev K
Ответ
Учитывая трудности выравнивания и создания двойных кривых с помощью CSS, это, очевидно, работа для SVG. Кривые намного легче создавать и контролировать. Вот пример использования:
Inline SVG
quadratic bezier curves
transform
Элемент use, поэтому есть только одно вхождение тега path
svg{ display:block; width:40%; margin:0 auto;}
C анимацией прелоудера
svg{ display:block; width:40%; margin:0 auto;}
.sq{ animation: opacity .6s infinite alternate; }
.gr{ animation-delay:-.6s;}
@keyframes opacity { to {opacity: 0;} }
Обратите внимание, что вам нужно будет добавить префиксы поставщиков в анимацию, и что анимация элементов svg не поддерживается IE / Edge.
Перевод ответа: Connecting rounded squares @web-tiki
Комментариев нет:
Отправить комментарий