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

我需要在我的div創建成角拐角與2px的邊框寬度DIV（不四捨五入）：如何創建CSS與成角拐角一個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>

來源

2016-08-15 Nick Vlasov

如果你想讓人幫助你，你需要分享一些代碼，以及你已經嘗試過的東西。 –

這不是一個代碼寫作服務;堆棧溢出爲編碼問題提供基於志願者的故障排除。請提供您編寫的代碼示例，以便我們能夠就如何糾正您遇到的問題向您提供建議。 –

您可能必須使用圖形創建。我不認爲有一個可靠的CSS來做到這一點。 – durbnpoisn

您就可以使用兩個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>

來源

2016-08-15 18:45:12

你可以在梯度或單個像素的圖像和背景屬性採取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

來源

2016-08-16 12:32:03

只有問題我會看到與這GCyrillus將是'隱形角落'的懸停。除此之外，還有很棒的地方 – jbutler483

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

喜歡的東西加入：

 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{}）

來源

2016-08-20 22:35:42 jbutler483

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

回答

相關問題