时间戳

首页 > 解决方案 > 在css中，如何创建一个凸出的正方形

css - 在css中，如何创建一个凸出的正方形

问题描述

是否可以在纯 css 中实现这一点，而无需在页面中使用嵌入式 SVG。

Obvsborder-radius: 10px并没有完全削减它。

在此处输入图像描述

标签： css

解决方案

这是一个简单的例子，我们改变了 top 和 bottom border-radiuses。我们可以使用另一个值作为一种奇怪的高度来控制我们半径的高度。

.box {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1em;
}
<div class="box">8</div>

现在，我们可以使用::beforeand::after选择器来制作其中的两个：

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 10px / 50%;
    padding: 30px;
    width: 1.75em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}
<div class="box">8</div>

那么，我听到你问，我们的 8 呢？它去哪儿了？好吧，我的朋友们，它实际上已经在我们奇怪的广场后面了。我们可以将它包装在一个跨度中并设置它的样式来解决这个问题。

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 10px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 10px / 50%;
    padding: 30px;
    width: 1.75em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}

.box > span {
    position: absolute;
    top: 32px;
    left: 36px;
    z-index: 5;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
}
<div class="box"><span>8</span></div>

我们还可以交换一些数字以使其更加完美：

.box::after {
    background: #62f;
    color: white;
    border-radius: 50% / 20px;
    padding: 30px;
    width: 1em;
    height: 1.75em;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 8px;
}

.box::before {
    background: #62f;
    color: white;
    border-radius: 20px / 50%;
    padding: 30px;
    width: 1.7em;
    height: 1em;
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 2px;
}

.box > span {
    position: absolute;
    top: 32px;
    left: 36px;
    z-index: 5;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
}
<div class="box"><span>8</span></div>

推荐阅读