sim卡的Pure-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。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只是为了让您了解SVG的可能性以及这将使您的CSS更加清晰和可维护，这是一个例子。 <path>是使用矢量绘图工具生成的，然后导出为SVG。您可以简单地将此内容与HTML结合使用。

要更改尺寸，请调整width元素上的#sim。其余的CSS规则都是不言自明的。

#sim {
  overflow: visible;
  width: 75px;
  height: auto;
}

#sim path {
  fill: #5891A5;
  stroke: #2D678D;
  stroke-width: 4;
}

#sim text {
  fill: white;
  font: 48px sans-serif;
}

<svg id="sim" x="0" y="0" width="180" height="120" viewBox="0 0 180 120">
  <path d="M180,108c0,6.627-5.373,12-12,12H12c-6.627,0-12-5.373-12-12V12C0,5.373,5.373,0,12,0h136l32,32V108z"/>
  <text x="90" y="60" text-anchor="middle" dominant-baseline="central">SVG!</text>
</svg>