css - 如何使用 CSS3 制作这种效果？

Question

我正在尝试使用 CSS3(切 Angular )实现这种类型(附有 img)效果(无半径)

有什么方法可以用边界半径来做这个吗？

Answer 1

这是example
html代码

<div class="div-wrap">
<div class="div-sec">Lorem ipsum dolor sit amet, blandit quaestio corrumpit ei has. Ei hinc dolor referrentur est. Legere corrumpit scripserit ad his. Eu qui ludus noster efficiendi. Sea iisque eleifend euripidis ea, pri at habeo patrioque. Debet deleniti recteque ne ius, ut albucius urbanitas usu. Eu illum posse viderer sea, an nec percipit verterem, duo id eirmod suscipit tractatos.</div>
</div>

CSS 代码

.div-wrap {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.div-sec {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid #000;
    color:#fff;
    border-right: 50px solid transparent;
}