html - 如何用css改变单词的形状？

Question

我想把一个单词的形状变成菱形。使用一个元素，我可以通过使用tranform rotate90 度然后调整宽度来做到这一点。但是我该怎么做呢？

.contact {
  height: 50px;
  width: 100px;
  color: red;
  border-radius: 50px/100px;
  border:1px solid;
}

<div class="contact">contact
</div>

没用，所以我尝试使用shape-outside：

.contact{height: 50px; 
width: 100px; color: red; 
border-radius: 50px/100px; shape-outside: 
ellipse(130px 140px at 20% 
20%);} 

没用。

像这样但没有边界的东西：https ://www.silhouettedesignstore.com/view-shape/79806

标签： htmlcss

Answer 1

仅通过使用 CSS，我能得到的最接近的东西就是这样的东西，虽然我不确定这是否是你要找的东西：

.foo {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  transform: rotate(45deg);
  margin: 30px;
  border-radius: 2px;
}

.bar {
  transform: rotate(-45deg);
}

<div class="foo">
  <div class="bar">
    Test
  </div>
</div>

使用transform: rotate()你可以旋转物体。