html - 我怎样才能把我的形象变成一个完整的圆圈？

Question

HTML

    <section class="section-about">
<div class="about">     
<figure class="about__shape">
<img src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c61d76abcdd6b0f7ef174e0da66a18d&auto=format&fit=crop&w=634&q=80" alt="" class="about__img">
<figcaption class="about__caption">Person's Name</figcaption>
</figure>  

<div class="about__desc">
<h1 class="u-margin-bottom-small heading-tertiary">About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis officia architecto ea blanditiis dolor. Quas aliquid suscipit commodi possimus, tempore est odio alias aut fugiat aliquam perspiciatis ratione dolorem quaerat, odit esse hic ab quam ducimus? Quo repellendus consectetur dicta eligendi, rerum id laboriosam excepturi nam dolore voluptatibus consequuntur! Voluptatem quia possimus eius fuga adipisci, minima vero incidunt maxime vel! Labore similique, dolores impedit amet iusto incidunt accusantium nemo atque harum quas nesciunt ipsa fugit repellendus. Quos placeat obcaecati similique nulla ipsum quae reprehenderit, quaerat deserunt soluta in quis fugiat dicta. Iusto ducimus earum, id adipisci illo voluptatibus quidem commodi?</p>
</div>
</div>
</section>

CSS

.section-about {
    background-color: #f6f6f6;
    margin-top: -20vh;
    height: 65vh;
    padding: 20rem 5rem;
    transform: skewY(-6deg);


    & > * {
        transform: skewY(6deg);
    }
}

.about {
    display: flex;
    text-align: center;
    width: 100%;


    &__shape {
        width: 15rem;
        height: 15rem;
        transform: translateX(3rem);
        position: relative;
        overflow: hidden;
        border-radius: 50%;

        @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
            -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
            -webkit-shape-outside: circle(50% at 50% 50%);
            shape-outside: circle(50% at 50% 50%);
            border-radius: none;
        }
    }

    &__img {
        height: 100%;
        width: 100%;
        transform: translateX(0) scale(1.4);
        backface-visibility: hidden;
        transition: all .5s;
    }

    &__caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 20%);
        color: #fff;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
        transition: all .5s;
        backface-visibility: hidden;
    }

    &:hover &__caption {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    &:hover &__img {
        transform: translateX(0) scale(1);
        filter: blur(3px) brightness(80%);
    }

    &__desc {
        align-self: center;
        margin-top: -4rem;
        margin-left: 15rem;
        width: 100%;
    }

}

我无法将我的图像变成一个完整的圆圈。我不知道这是否与我使用 flexbox 作为我的布局或填充有关。我尝试修复它并将其放在空白页中，调整图像的宽度和转换代码并且它有效但是当我放入我的原始元素时，图像不会变成一个完整的圆圈。这是我的确切问题的代码笔的链接: https://codepen.io/QuizonM/pen/ZjLOQJ

Answer 1

您的 webkit 剪辑路径是导致此问题的原因

https://imgur.com/a/BbMKhfg

不确定您是否需要该剪辑。

如果你想要一个完整的圆，删除你的 overflow:hidden in &__shape 你得到 this .

移除溢出:隐藏；

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    border-radius: 50%;

    @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
        -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
        -webkit-shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50% at 50% 50%);
        border-radius: none;
    }
}

如果您想要椭圆形，请删除@supports 及其后的所有内容以获得this

删除了@supports 和剪辑的其余部分:

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    overflow:hidden;
    border-radius: 50%;
}

希望这对您有所帮助，并且正是您所寻找的。