鍍金池/ 問答/HTML/ 如何用css實現(xiàn)一個div的左右半圓凹陷，并且凹陷的地方顯示父div的背景圖

如何用css實現(xiàn)一個div的左右半圓凹陷，并且凹陷的地方顯示父div的背景圖

效果就是這樣的，可是我用css3的徑向漸變實現(xiàn)了左邊的半圓凹陷，可是右邊半圓凹陷就實現(xiàn)不了，求大神解答。

clipboard.png

回答
編輯回答
真難過

<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>

效果如圖
圖片描述

2018年6月10日 09:10