Question

我正在尝试曲线顶部的div（就像在这个设计中：https://dribbble.com/shots/1691707-Sleek-Multipurpose-Webs%20ite-Part-2/attachments/268709），特别是这个WP主题上英雄形象下面的白色div：https://themeisle.com/demo/?theme=Hestia。

我试图运用以下逻辑，我相信它会给我我想要的东西，但每次尝试都会出错：

＆＃13;

.main-raised {
margin: -200px -500px 0px -500px !important;
border-radius: 1150px 1150px 0px 0px !important;
z-index: 1 !important;
}

.hestia-features, .features {
padding: 75px 0 55px;
text-align: center;
}

＆＃13;

    <div class="main main-raised">
            <section class="features hestia-features" id="features" data-sorder="hestia_features">
                    <div class="container">
                            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                                                <h2 class="hestia-title">Core features</h2>
                                                                        <h5 class="description">Example text</h5>
                                        </div>
            </div>
                    <div class="hestia-features-content">
    <div class="row">               <div class="col-md-4 feature-box">
                <div class="info hestia-info">
                                            <a href="#">
                                    <div class="icon" style="color:#e91e63">
            <i class="fa fa-wechat"></i>
                                    </div>
                                                                                                <h4 class="info-title">Responsive</h4>
                                                                            </a>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
            </div>
                            <div class="col-md-4 feature-box">
                <div class="info hestia-info">
                                            <a href="#">
                                    <div class="icon" style="color:#00bcd4">
            <i class="fa fa-check"></i>
                                    </div>
                                                                                                <h4 class="info-title">Quality</h4>
                                                                            </a>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
            </div>
                            <div class="col-md-4 feature-box">
                <div class="info hestia-info">
                                            <a href="#">
                                    <div class="icon" style="color:#4caf50">
            <i class="fa fa-support"></i>
                                    </div>
                                                                                                <h4 class="info-title">Support</h4>
                                                                            </a>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
            </div>
            </div><!-- /.row --><div class="row"></div>     </div>
                                </div>

＆＃13;

有人可以建议如何实现这一目标吗？感谢。

Answer 1

您只需要使用border-radius属性。

您可以使用速记值修改每个角落。

border-radius：15px 15px 0 0;

这将使左上角和右上角各自的半径为15px，底角的半径为0。

在此进一步阅读，https://www.w3schools.com/cssref/css3_pr_border-radius.asp

使用CSS曲线顶部的div

1 个答案: