Подключение округлых квадратов

17

Как создать логотип div в соответствии с прилагаемым изображением ниже:

Это то, что я создал в 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;
}
<div class='wrapper'>
  <ul class='blocks'>
    <li class='block-1'></li>
    <li class='block-2'></li>
    <li class='block-3'></li>
    <li class='block-4'></li>
  </ul>
</div>
    
задан Sanjeev Kumar 06.10.2016 в 13:21
источник
  • Использовать SVG. Это намного проще и более отзывчиво. –  Paulie_D 06.10.2016 в 13:29
  • Вы изучали использование элемента <canvas>? –  gaynorvader 06.10.2016 в 14:17

4 ответа

27

С учетом сложности выравнивания и создания двойных кривых с помощью CSS , это, очевидно, работа для SVG. Кривые намного проще создавать и контролировать. Вот пример использования:

svg{ display:block; width:40%; margin:0 auto;}
<svg viewbox="0 0 16 15">
  <defs>
    <path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
  </defs>
  <use xlink:href="#shape" fill="#0076AA"/>
  <use xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>

С анимацией загрузки:

svg{ display:block; width:40%; margin:0 auto;}
.sq{ animation: opacity .6s infinite alternate; }
.gr{ animation-delay:-.6s;}
@keyframes opacity { to {opacity: 0;} }
<svg viewbox="0 0 16 15">
  <defs>
    <path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
  </defs>
  <use class="sq bl" xlink:href="#shape" fill="#0076AA"/>
  <use class="sq gr" xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>

Обратите внимание, что вам нужно будет добавить префиксы поставщиков в анимацию и что анимации на svg-элементах не поддерживаются IE / Edge.

    
ответ дан web-tiki 06.10.2016 в 13:43
источник
8

Мне удалось создать дизайн, который вы искали, добавив несколько псевдоэлементов в ваш CSS. Мне немного помогло время, так что это немного грубо по краям, но, надеюсь, это поможет:

body,html{
    background-color:#fff;
    height:100%;
}
.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:82px;
    height:82px;
    position:relative;
    transform:rotate(45deg);
}
ul li{
    width:2em;
    height:2em;
    position:absolute;
    transform:rotate(-45deg);
}
.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;
}
.block-1::before,.block-2::before{
    background:inherit;
    content:"";
    top:calc(100% - 5px);
    left:-50%;
    height:10px;
    position:absolute;
    transform:rotate(-45deg);
    width:100%;
}
.block-3::before,.block-4::before{
    background:#fff;
    border-radius:50%;
    content:"";
    height:calc(50% + 3px);
    left:50%;
    position:absolute;
    top:calc(-50% - 3px);
    width:calc(50% + 3px);
}
.block-3::after,.block-4::after{
    background:#fff;
    border-radius:50%;
    content:"";
    height:calc(50% + 3px);
    position:absolute;
    right:calc(-50% - 3px);
    top:-3px;
    width:calc(50% + 3px);
}
<div class='wrapper'>
    <ul class='blocks'>
        <li class='block-1'></li>
        <li class='block-2'></li>
        <li class='block-3'></li>
        <li class='block-4'></li>
    </ul>
</div>
    
ответ дан Shaggy 06.10.2016 в 13:50
источник
4

Ваш лучший вариант - использовать SVG.

Вы можете запустить его через изображение в SVG-конвертер, который дает вам полностью законченный SVG, создайте SVG-код вручную или используйте программу, например Illustrator, для достижения желаемого эффекта.

Изображение в SVG Преобразование

Для создания кода используется онлайн-конвертер SVG. Как вы можете видеть его вполне полный

body {
  background: lightgrey;
}
<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 900 904" version="1.1">
<path fill="#0176aa" d=" M 350.14 0.00 L 546.51 0.00 C 557.90 0.78 568.99 5.90 576.59 14.48 C 583.89 22.42 588.07 33.18 587.88 43.98 C 587.88 107.98 587.88 171.99 587.88 235.99 C 588.17 249.96 580.94 263.65 569.60 271.71 C 561.12 277.92 550.43 280.52 540.01 279.83 C 487.44 278.44 434.85 271.78 382.24 276.12 C 362.32 277.82 342.25 280.95 323.63 288.51 C 310.06 294.06 297.18 302.66 289.17 315.19 C 282.70 325.19 279.87 337.18 279.77 349.00 C 279.78 413.00 279.76 477.00 279.78 541.00 C 279.91 547.26 278.86 553.57 276.37 559.33 C 269.95 574.91 253.92 585.94 237.04 586.14 C 176.69 586.22 116.34 586.15 56.00 586.17 C 47.31 586.07 38.35 586.89 30.00 583.93 C 13.22 578.53 0.73 562.25 0.00 544.61 L 0.00 346.86 C 1.21 331.57 10.80 317.30 24.66 310.68 C 30.65 307.78 37.31 306.21 43.97 306.34 C 78.64 306.38 113.32 306.11 147.98 305.13 C 176.85 303.95 205.87 302.67 234.30 297.14 C 250.18 293.88 266.27 289.25 279.60 279.68 C 289.65 272.50 297.23 262.16 301.52 250.61 C 308.30 232.56 309.35 213.05 310.12 193.97 C 310.41 178.31 310.35 162.64 309.88 146.99 C 309.15 112.31 308.05 77.64 308.19 42.95 C 308.23 32.02 312.83 21.27 320.42 13.44 C 328.11 5.34 339.00 0.56 350.14 0.00 Z"/>
<path fill="#98bd82" d=" M 631.90 331.91 C 640.05 323.06 651.95 317.87 663.99 317.91 C 728.00 317.88 792.02 317.89 856.04 317.91 C 873.26 317.68 889.87 328.70 896.45 344.60 C 898.66 349.76 899.86 355.36 899.85 360.98 C 899.86 422.00 899.86 483.02 899.86 544.03 C 899.84 552.43 900.48 561.14 897.25 569.10 C 891.45 585.30 875.35 597.26 858.09 597.69 C 841.41 597.85 824.75 596.63 808.11 595.64 C 766.00 593.26 723.59 590.29 681.55 595.31 C 662.45 597.77 643.15 601.81 626.03 610.97 C 614.00 617.36 603.35 627.05 597.60 639.56 C 593.43 648.42 591.80 658.29 591.75 668.03 C 591.77 731.04 591.73 794.04 591.76 857.05 C 591.92 862.96 591.45 868.98 589.40 874.58 C 583.95 890.84 568.25 902.80 551.17 904.00 L 351.77 904.00 C 336.62 902.43 322.55 892.77 316.15 878.88 C 312.84 872.11 311.79 864.49 311.89 857.02 C 311.92 797.01 311.90 737.00 311.90 676.99 C 311.82 668.81 311.68 660.36 314.76 652.63 C 320.59 636.73 336.31 624.97 353.29 624.28 C 404.78 623.97 456.37 624.47 507.73 620.29 C 528.90 618.29 550.27 615.67 570.40 608.50 C 584.50 603.46 597.97 595.10 606.37 582.42 C 616.43 567.35 619.46 548.95 621.06 531.25 C 623.56 498.87 621.71 466.38 621.22 433.96 C 620.48 409.99 620.21 386.00 620.20 362.01 C 619.94 350.95 624.36 339.95 631.90 331.91 Z"/>
</svg>

Ручная кодировка SVG

Я только половину делал это, и это не идеально, но вы можете видеть, что я получаю. Это также намного легче читать и понимать, чем выход преобразователя.

<svg height="400" viewbox="0 0 400 400">
    <path fill="blue"
          d="M145,0
             L200,0
             Q220,0 220,20
             L220,75
             Q220,95 200,95
             L185,95
             Q145,90 135,110
             L135,165
             Q135,185 115,185
             L60,185
             Q40,185 40,165
             L40,110
             Q40,90 60,90
             L75,90
             Q115,95 120,70
             L120,20
             Q120,0 140,0z" />
</svg>
    
ответ дан Stewartside 06.10.2016 в 13:49
источник
2

Вот полу-сформулированный ответ. Не уверен, что вы можете сделать размытие менее прозрачным, но вот насколько я добрался.

body {
  background: #eee;
}
.filter {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.block {
  border-radius: 4px;
  width: 2em;
  height: 2em;
  position: absolute;
  background: #fff;
}
.filter {
  height: 4em;
}
.block1 {
  -webkit-transform: translate3d(0, 2em, 0);
  transform: translate3d(0, 2em, 0);
  background: #0076aa;
}
.block2 {
  -webkit-transform: translate3d(2em, 0, 0);
  transform: translate3d(2em, 0, 0);
  background: #0076aa;
}
.block3 {
  -webkit-transform: translate3d(2em, 0, 0);
  transform: translate3d(2em, 0, 0);
  background: #98bd81;
}
.block4 {
  -webkit-transform: translate3d(4em, -2em, 0);
  transform: translate3d(4em, -2em, 0);
  background: #98bd81;
}
<div class="filter">
  <div class="block block1"></div>
  <div class="block block2"></div>
</div>
<div class="filter">
  <div class="block block3"></div>
  <div class="block block4"></div>
</div>

<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -7" result="goo" />
      <feComposite in2="goo" in="SourceGraphic" result="mix" />
    </filter>
  </defs>
</svg>

Я знаю, что у вас есть ответ сейчас, но вот еще один способ сделать это.

    
ответ дан Andrew Bone 06.10.2016 в 15:07
источник