如何創建CSS與成角拐角一個div

Question

我需要在我的div創建成角拐角與2px的邊框寬度DIV（不四捨五入）：

我需要一個CSS-唯一的解決辦法

.center-link { 
 
    text-align: center; 
 
} 
 

 
.continue { 
 
    text-decoration: none; 
 
    border: 2px solid #26368d; 
 
    border-radius: 10px; 
 
    background-color: transparent; 
 
    margin: 0 auto; 
 
    padding: 10px 10px 9px; 
 
    font-family: 'Raleway'; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    color: #26368d; 
 
    transition: all 0.5s ease; 
 
}

<div class="center-link"><a href="#" class="continue">Продолжить читать</a></div>

Answer 1

您就可以使用兩個span的左右邊框，然後在這些跨度上使用:before和:after來創建角點。

a { 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    margin: 10px; 
 
} 
 
.el { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    margin: 50px; 
 
    position: relative; 
 
} 
 
span { 
 
    height: 20px; 
 
    position: relative; 
 
} 
 
span.left { 
 
    border-left: 1px solid black; 
 
} 
 
span.right { 
 
    border-right: 1px solid black; 
 
} 
 
.left { 
 
    margin-left: -10px; 
 
} 
 
.right { 
 
    margin-right: -10px; 
 
} 
 
span:before, 
 
span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 1px; 
 
    background: black; 
 
    height: 15px; 
 
} 
 
.left:before { 
 
    transform: rotate(40deg); 
 
    top: -13px; 
 
    left: 4px; 
 
} 
 
.left:after { 
 
    transform: rotate(-40deg); 
 
    bottom: -13px; 
 
    left: 4px; 
 
} 
 
.right:before { 
 
    transform: rotate(-40deg); 
 
    top: -13px; 
 
    right: 4px; 
 
} 
 
.right:after { 
 
    transform: rotate(42deg); 
 
    bottom: -13px; 
 
    left: -5px; 
 
}

<div class="el"> 
 
    <span class="left"></span> 
 
    <a href="">Lorem ipsum dolor.</a> 
 
    <span class="right"></span> 
 
</div>

Answer 2

你可以在梯度或單個像素的圖像和背景屬性採取loook，背景大小，將有助於繪製形狀

body { 
 
    text-align:center; 
 
} 
 
a { 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    color:inherit;/* will use parent color if not reset */ 
 
    margin:1em; 
 
    padding:0.5em 1em; 
 
    background: /* lets draw the background image via current color if text color is to be matched */ 
 
    linear-gradient(45deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)), 
 
    linear-gradient(-45deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),linear-gradient(225deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)),linear-gradient(-225deg, transparent 0.5em, currentcolor 0.5em, currentcolor calc(0.5em + 2px), transparent calc(0.5em + 2px)), 
 
    linear-gradient(to left, currentcolor, currentcolor) top no-repeat, 
 
    linear-gradient(to left, currentcolor, currentcolor) bottom no-repeat, 
 
    linear-gradient(to top, currentcolor, currentcolor) left no-repeat, 
 
    linear-gradient(to top, currentcolor, currentcolor) right no-repeat; 
 
    /* resize gradient/image in order to draw pieces needed */ 
 
    background-size: 
 
    auto auto, 
 
    auto auto, 
 
    auto auto, 
 
    auto auto, 
 
    calc(100% - 1em - 6px) 2px, 
 
    calc(100% - 1em - 6px) 2px, 
 
    2px calc(100% - 1em - 6px), 
 
    2px calc(100% - 1em - 6px) 
 
    ; 
 
} 
 
/* find out the purpose of currentcolor here */ 
 
:nth-child(1) { 
 
    color:purple 
 
} 
 
:nth-child(2) { 
 
    color:gold 
 
} 
 
:nth-child(3) { 
 
    color:pink 
 
} 
 
:nth-child(4) { 
 
    color:tomato 
 
} 
 

 
:nth-child(5) { 
 
    color:turquoise 
 
} 
 
/* increase size via padding ? */ 
 
:nth-child(6) { 
 
    padding:1em 2em; 
 
    color:gray 
 
}

<a href="#">button link</a> 
 
<a href="#">button link</a> 
 
<a href="#">button link</a> 
 
<a href="#">button link</a> 
 
<a href="#">button link</a> 
 
<a href="#">button link</a>

Demo pen to play with

Answer 3

您應該能夠通過使用傾斜角度和透視圖來保持點擊測試的準確性，從而允許您在不影響用戶體驗的情況下創建這個傾斜的按鈕。

喜歡的東西加入：

 transform: perspective(25px) rotateY(45deg); 

一個快速演示是：

button { 
 
    border: 0; 
 
    border-top: 5px solid tomato; 
 
    border-bottom: 5px solid tomato; 
 
    color: tomato; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    background: transparent; 
 
    padding: 10px; 
 
    outline: none; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
button:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -5px; 
 
    left: 100%; 
 
    height: 100%; 
 
    width: 20px; 
 
    background: inherit; 
 
    transform: perspective(25px) rotateY(45deg); 
 
    transform-origin: center left; 
 
    border-top: 5px solid tomato; 
 
    border-right: 8px solid tomato; 
 
    border-bottom: 5px solid tomato; 
 
} 
 
button:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -5px; 
 
    right: 100%; 
 
    height: 100%; 
 
    width: 20px; 
 
    background: inherit; 
 
    transform: perspective(25px) rotateY(-45deg); 
 
    transform-origin: center right; 
 
    border-top: 5px solid tomato; 
 
    border-left: 8px solid tomato; 
 
    border-bottom: 5px solid tomato; 
 
}

<button>Button</button>

作爲一個側面說明，該解決方案可縮短並提出了很多更有效通過將重複規則放置在單個選擇器內（button:before, button:after{}）