css - 如何用 CSS3 创建这种效果？

Question

我正在尝试使用 CSS3（切角）来实现这种类型（img 附加）效果（无半径）

有没有办法用边界半径来做到这一点？

Answer 1

这是示例
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;
}