Question

http://jsfiddle.net/zander_pope/vb0s4jer/ 我想用最少量的div和css（仅限html和css）来实现这样的东西。即使折叠，所有角落都应该是圆角。

<div class="square">
<div class="inner">
    <p>4</p>
</div>
</div>

.square{
    width:100px;
    height:100px;
    background-color:blue;
    border-radius:4px;
}
.inner{
width: 0;
height: 0;
border-style: solid;
border-width: 30px 30px 0 0;
border-color: #ff0000 transparent transparent transparent;
}

Answer 1

在overflow:hidden;课程中添加.square：

.square{   
    overflow:hidden;
    width:100px;
    height:100px;
    background-color:blue;
    border-radius:4px;
}

Answer 2

HTML

<div class="square">
    <div class="square fold"/>
</div>

CSS

.square {
   width:100px;
   height:100px;
   background-color:blue;
   border-radius:4px;
}

.square .fold {
    background-color:red;
    -webkit-clip-path: polygon(0 0, 0 29%, 29% 0);
    clip-path: polygon(0 0, 0 29%, 29% 0);
}

https://jsfiddle.net/vb0s4jer/6/

将数字完美地对齐在带有圆形边框的正方形的折角处

2 个答案: