如何创建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.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>
解决方法
考虑到对齐和
making double curves with CSS的麻烦,这显然是SVG的一个工作。曲线更容易创建和控制。以下是使用以下示例:
>内联SVG
> quadratic bezier curves
> transform
> use element所以只有一个路径标签出现
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>