div的凸边，在CSS中切成div效果的一面 [英] Bulge side of div, cut into side of div effect in CSS

问题描述

我正在寻找在CSS中创建两个形状的方法.第一个，左边的那个，我快要制作了，但是我的形状太偏了.

I am looking to create two shapes in CSS. The first one, the one on the left, I am close to making, but my shape goes out too far.

第二种形状，我正在为之苦苦挣扎.

The second shape, I am struggling with completely.

有没有可以复制这些形状的东西?无论如何，不​​使用Psuedo元素/仅作为一个div可以做到这一点吗?

Is there anyway to replicate these shapes? Is there anyway to do it without the use of Psuedo elements/as one div only?

目标是使用CSS动画将第一个形状变成第二个形状，所以我不认为SVG是一种选择.

The goal is to use CSS animation to make the first shape into the second, so I do not believe SVG is an option.

div 应该从形状1开始，然后逐渐过渡到形状2.我的方法使我的隆起无法突出，直到现在为止.

The div should start at shape one, and gradually transition into shape two. I'm having issues getting the bulge to not stick out so far, with my method.

HTML

<div id="one"></div>
<div id="two"></div>

CSS

div {
    width: 80px;
    height: 80px;
    background: black;
    margin: 60px;
    position: relative;
}

#one:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 55%;
  width: 80px;
  height: 80px;
  background: black;
  left: 0;
  top: -34px;
}

JS小提琴链接

推荐答案

您可以使用Raphael或SVG对贝塞尔曲线进行变形，但我不知道该怎么做.那应该给出最干净的解决方案

You can use Raphael or SVG for morphing bezier paths but i dont know how to do that. That should give the cleanest solution

我认为这可能有效:-

• 创建一个元素并隐藏溢出"

• Create one element and put Overflow hidden

设置伪元素的时间，设置边框半径和高度的动画

Set the timing on pseudo element, animating border radius and height

使用伪元素的箱形阴影进行着色.

Use box shadow of pseudo element for coloring.

> 小提琴<

> Fiddle <

body{
    background: url("http://www.placekitten.com/g/600/400");
    background-size: cover;
}

#rect {
    height: 300px;
    width: 100px;
    border-top-left-radius: 50px 40px;
    border-top-right-radius: 50px 40px;
    position: relative;
    overflow: hidden;
    -webkit-animation: morph 1s linear 1;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph 1s linear 1;
    animation-fill-mode: forwards; 
}

#rect:before {
    position: absolute;
    content: "";
    width: 100px;
    box-shadow: 0px 0px 0px 400px #A34;
    -webkit-animation: morph2 1s linear 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph2 1s linear 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
}

@-webkit-keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@-webkit-keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

/*FOR OTHER BROWSERS*/

@keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

<div id="rect">
</div>

注意抱歉，代码太大了，大约一年后，我正在编写CSS和HTML！我认为很多此类混乱都可以缩短.

NOTE Sorry the code got a lil too big, I am writing CSS and HTML after about a year! I think a lot of this mess could be shortened.

这篇关于div的凸边，在CSS中切成div效果的一面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！