问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用css实现一个div的左右半圆凹陷，并且凹陷的地方显示父div的背景图

头像
隔壁的二狗
    4421526

    效果就是这样的，可是我用css3的径向渐变实现了左边的半圆凹陷，可是右边半圆凹陷就实现不了，求大神解答。

    clipboard.png

    htmlcss
    阅读 11.5k
    2 个回答
    得票最新
    头像
    yoghourt
      413
      ✓ 已被采纳

      <html> <head> <meta charset="utf-8"> <title></title> <style
      type="text/css"> .outer{

                  width: 300px;
            height: 200px;
            background-image: url(http://placekitten.com/350/200);             }             .inner:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background-image: radial-gradient(circle at 0 50% ,transparent 0%, transparent 50px,blue 50px, blue 100%);             }             .inner{
            position: relative;
            height: inherit;             }             .inner:after{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-image: radial-gradient(circle at 100% 50% ,transparent 0%, transparent 50px,blue 50px, blue 100%);             }         </style>     </head>
<body>         <div class="outer">             <div class="inner"></div>         </div>
</body> </html>

      效果如图
      图片描述

      头像
      浮木
        132
        <div class="box1"></div>
        .box1 {
    width: 200px;
    height: 520px;
    background: #58a;
    background: radial-gradient(circle at 0 25px, transparent 15px, #58a 16px) top left,
    radial-gradient(circle at 100px 25px, transparent 15px, #58a 16px) right top;
    background-size: 50% 100%;
    background-repeat: no-repeat;
}

        clipboard.png

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题