问题

我尝试制作一个有一个角被削掉的按钮，我在网上搜索但找不到创建它的方法。

我尝试的是以下CSS代码：

#button {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  height: 0;
  width: 100px;
}

但正如你可以看到的那样，它并不会：

任何帮助都将非常感谢。

英文:

I try to make a button with one corner shaved, I was searching around the web but could't find a method to create it like that.

The thing I tried is the following css code:

   #button {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  height: 0;
  width: 100px;
}

But as you can see, it does..:

Any help would be great

答案1

得分: 5

你考虑过使用clip-path吗？
你可以尝试这个

.path {
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 29%);
  width: 100px;
  height: 60px;
  background-color: tomato;
}

<div class="path"></div>

英文:

Have you consider using clip-path?
You can try this

.path {
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%, 0 29%);
  width: 100px;
  height: 60px;
  background-color: tomato;
}

&lt;div class=&quot;path&quot;&gt;&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。