CSSボーダー半径との国境

-3

だから、私は、バナーに100px 20pxののborder-top-右半径を与えました。私はイメージのボーダー半径をコピーすることができました。問題は私が国境をコピーできなかったことです。私はborder:10px solid #fffを適用しようとしたと歪んだ/奇妙に見えます。ここで私が今持っているものです。

出典

2016-09-08 Chad

あなたはそれがあいまいで分かりにくいと思われるよう、あなたが、言うことをしようとしているものに、より関連性HTML + CSSコードしてください、そして可能ならば、精巧なABITを追加することができます。 – Ricky

あなたがしようとしたことのコードサンプルを提供してください。もしあなたがそれを手伝うことができれば、より良い。 –

あなたのCSSをこの要素に合わせて靴を履いてください。 –

あなたの周りのこの作品を使用すると、私はボーダーでそれを試みたが、それが動作するようには思えない欲しいものを得ることができます。

body{background: gray;} 
 
.wrapper { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: 50px auto; 
 
    } 
 
.image { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: url(https://scproxy-prod.adobecc.com/api?X-Location=https%3A%2F%2Fcc-eu1-prod.adobesc.com%2Fapi%2Fv1%2Fassets%2F3fd53348-7e53-46f1-a1fa-f03a8fe5cb6c%2Frenditions%2Fjpg%2F1200?&v=1473018134655&Authorization=Bearer%20eyJ4NXUiOiJpbXNfbmExLWtleS0xLmNlciIsImFsZyI6IlJTMjU2In0.eyJmZyI6IlFYMjdaT0RKQU1BQUFBQUFBQUFBQUFFTEFBPT09PT09IiwiYXMiOiJpbXMtbmExIiwiYyI6ImhpdWExbFdqQTBzbVpoTFhZSnFqUkE9PSIsInVzZXJfaWQiOiI0ODQ0MjkxRTRGNzA3ODgxMEE0OTBENDVAQWRvYmVJRCIsIm1vaSI6IjE5OTZlMGRiIiwic2NvcGUiOiJBZG9iZUlELG9wZW5pZCxnbmF2LGNyZWF0aXZlX2Nsb3VkLHJlYWRfb3JnYW5pemF0aW9ucyxhZGRpdGlvbmFsX2luZm8uc2NyZWVuX25hbWUsYWRkaXRpb25hbF9pbmZvLnNlY29uZGFyeV9lbWFpbCxhZGRpdGlvbmFsX2luZm8ucm9sZXMsc2FvLmNjcHJpdmF0ZSxzYW8uY2NfZXh0cmFjdCxzYW8uY2NlX3ByaXZhdGUsYWNjb3VudF90eXBlLHNhby5jY3B1Ymxpc2giLCJjcmVhdGVkX2F0IjoiMTQ3MzQ0MDQwOTU5NyIsImlkIjoiMTQ3MzQ0MDQwOTU5Ny0xNjBiYjc2Yy0xNmU0LTQzOTctYjY1ZC0wMDQ4NWQ5M2EzMWMiLCJ0eXBlIjoiYWNjZXNzX3Rva2VuIiwiZXhwaXJlc19pbiI6Ijg2NDAwMDAwIiwiY2xpZW50X2lkIjoiQ3JlYXRpdmVDbG91ZFdlYjEifQ.kgR1X7vFpAnkrQGyY2jbo4dtxPSsugHw4ms9ij-hDbrvJdsr2vO_n3GhbRDlzCA1BSkvbkg54c5w2x4lYiRS965VauxjwmLYlUHsEMCBXQmsMmf-_iT68AL-lh9kcec-y10XVBlYk96KQw84PFHn03x1eQK3xXtlrrtmWhys5lcsjZc2dklrfbcy4TlDYWQfYACCaEg4up3_BVZljr3r8u11eF40tormcJTLW7HqFRQf2QL3IP6u2vu3flSBI5wd_XDQGXusF424Exsv1VV4as24e994w3jH_GvUDo8sffCQFJmb5lEfWZOxwG6SUHAbmYG501FDepjlCaGIp7tCdQ); 
 
    background-size: cover; 
 
    width: calc(100% - 10px); 
 
    height: calc(100% - 10px); 
 
    border-top-right-radius: 100px 20px; 
 
    z-index: 2; 
 
    } 
 
.border { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-top-right-radius: 96px 22px; 
 
    z-index: 1; 
 
    }

<div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="border"></div> 
 
</div>

出典

2016-09-09 01:00:53

CSSボーダー半径との国境

答えて

関連する問題