矩形有一個斜邊

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>