css - SIM 卡的纯 css 图标

Question

我正在尝试修改下面的 css 代码以获得这样的几何图形:

...并在图标中间放置一些文本(例如，数字“1”)。

#diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: red;
	position: relative;
	top: -50px;
}
#diamond:after {
	content: '';
	position: absolute;
	left: -50px;
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: red;
}

<div id = 'diamond'>1</div>

你能帮我解决这个问题吗？

Answer 1

我必须承认这样做很有趣，但您最好只使用 SVG 图像，which you can style with CSS也是 - 如果您需要的话。

#diamond {
  position: relative;
  width: 180px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: steelblue;
  color: white;
  font: 48px sans-serif;
}

#diamond:before {
  content: "\00a0";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 35px 35px 0;
  border-color: transparent white transparent transparent;
}

<div id = 'diamond'>SIM</div>