如何在HTML/CSS中创建一个半角矩形的元素在里面的左侧？

我基本上要创建内部

目前我使用这个类，但不工作becouse在大屏幕上失去了与透明半圆的矩形创建HTML/CSS元素形状

.half-negative-circle{  
    width:100%;  
    height:100%;  
    position:relative;  
    overflow:hidden;  
    z-index: 1 !important;  
} 
.half-negative-circle:before{  
    content:'';  
    position:absolute;  
    right:70%; 
    width:55%;  
    height:100%;  
    border-radius:100%; 
     box-shadow: 300px 200px 100px 300px #0b77dc ; 
    }

任何帮助创造这种类型的元素的最佳途径将不胜感激。

感谢很多提前

来源

2017-04-13 harlen giraldo

在（因此）我们希望你去尝试自己**编写代码**。后** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有问题，你可以**发布你已经尝试**与清楚的解释是什么是'工作**并提供[** Minimal，Complete和Verifiable示例**]（// stackoverflow.com/help/mcve）。我建议阅读[问]一个好问题和[完美问题]（http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/）。另外，一定要参加[旅游]。 –

好的，谢谢你的评论 –

最简单的，但有点粗糙的方法是使用容器的背景图像，然后使用具有相同背景图像的虚拟元素位于右侧。然后可以调整左上角和左下角的边界半径。

例子：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
.banner { 
 
    background-image: url(https://lorempixel.com/320/160/nature); 
 
    background-repeat: no-repeat; 
 
    background-position: center right; 
 
    width: 320px; height: 160px; 
 
    position: relative; 
 
} 
 
.caption { 
 
    position: absolute; top: 0; left: 0; 
 
    width: 70%; height: 100%; 
 
    color: #fff; font-size: 1.3em; font-family: sans-serif; 
 
    padding: 8px; background-color: rgba(20, 120, 210, 0.8); 
 
} 
 
.dummy { 
 
    position: absolute; top: 0; right: 0; 
 
    width: 55%; height: 100%; 
 
    border-top-left-radius: 60% 70%; 
 
    border-bottom-left-radius: 100% 100%; 
 
    background-image: url(https://lorempixel.com/320/160/nature); 
 
    background-repeat: no-repeat; 
 
    background-position: center right; 
 
}

<div class="banner"> 
 
    <div class="caption">Lorem Ipsum</div> 
 
    <div class="dummy"></div> 
 
</div>

来源

2017-04-13 14:49:01 Abhitalks

哇感谢兄弟！ –

-2

你可以把孩子们的画另一张照片（蓝色）的下方，然后添加上述两者的话

来源

2017-04-13 14:12:51

我想过，但我想能够使用一个不需要编辑图像的类 –

如果是半负圆，哪个元素？一个图像？ –

要使用编辑的图像，只把它们放在XD，但我不认为这是很好的做法，所以对于数据原因我试图改善我的代码或使用另一个这种情况下 –

如何在HTML/CSS中创建一个半角矩形的元素在里面的左侧？

回答

相关问题