矩形有一个斜边

Question

我正在寻找一种CSS方法来使一个div的边倾斜，但边界半径在顶部。例如

与变换歪斜不工作，因为我需要正确的边界半径的解决方案。 在此先感谢！

Answer 1

这里是一个svg解决方案，无需任何CSS：

<svg width="95" height="46"> 
 
    <path d="M1,9 Q1,1 9,1 L70,1 Q76,0 80,9 L95,45 L1,45z" fill="#EEEEEE" stroke="#818185" stroke-width="1" /> 
 
    <text x="25" y="29" font-size="18" font-weight="500" fill="#414145">Hits</text> 
 
</svg>

Answer 2

这个怎么样？我制作了两个不同颜色的部分，以便您可以看到它们的轮廓。

.tab { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
.tab .left { 
 
    background-color: pink; 
 
    border: solid red; 
 
    border-width: 3px 0 0 3px; 
 
    border-radius: 10px 0 0 0; 
 
    height: 20px; 
 
    padding: 0 10px; 
 
    float: left; 
 
} 
 
.tab .right { 
 
    background-color: #8080FF; 
 
    border: solid blue; 
 
    border-width: 3px 3px 0 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 0 10px 0 0; 
 
    float: left; 
 
    transform: skew(30deg); 
 
    transform-origin: 0 100%; 
 
}

<div class="tab"> 
 
    <div class="left">TextTexT</div> 
 
    <div class="right"></div> 
 
</div>

Answer 3

演示 - http://jsfiddle.net/bu4aps5a/

使用伪元素:after

div { 
 
    width: 100px; 
 
    height: 40px; 
 
    border: 1px solid grey; 
 
    border-right: 1px solid transparent; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 6px; 
 
    position: relative; 
 
    background: rgb(219, 219, 219); 
 
    text-align: center; 
 
    line-height: 40px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    width: 20px; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform: skewX(25deg); 
 
    border: 1px solid grey; 
 
    border-left: 1px solid transparent; 
 
    top: -1px; 
 
    right: -11px; 
 
    border-top-right-radius: 6px; 
 
    background: rgb(219, 219, 219); 
 
}

<div>test</div>