如何在CSS中创建带有角的div [英] How to create a div with angled corners in CSS

问题描述

我需要在div处创建带有2px边框宽度的带角的div（不是圆角）：

I need to create div with angled corners (not rounded) with 2px border-width at my div:

我需要纯CSS解决方案

I need a CSS-only solution

.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>

推荐答案

您可以看一下渐变色或单像素图像和背景属性，background-size帮助绘制形状

You could take a loook at gradient or single pixel image and background properties, background-size will help to draw the shapes

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>

演示笔可以玩

这篇关于如何在CSS中创建带有角的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！