想用css / html创建一个只有一个角的div [重复]答案

【问题标题】：Want to create a div with just one corner raised a little bit up with css / html [duplicate]想用css / html创建一个只有一个角的div [重复]
【发布时间】：2016-02-08 17:30:23
【问题描述】：

我想创建一个 div，它的右角稍微向上一点。我已经尝试过使用它与边界，但在脉络中。请看图片，任何建议将不胜感激:)

我使用了 css3 skew，但它并没有像我想要的那样工作

【问题讨论】：

你用谷歌搜索过什么吗？
我已经检查了 Skewed Borders 帖子，但它对每个边框都有影响...我只想抬起右上角...这似乎不是 Skewed Borders 帖子中的答案
@Martijn Pieters 请取消删除我的答案...它被错误地发布在两个问题上...我已在错误的问题上将其删除并希望将其返回到此帖子。
@Omer，请参阅链接 Shape with a slanted side (Responsive) 中 Harry's Answer 中的 Method 2 - Gradient Background

标签： html css canvas html5-canvas

【解决方案1】：

好的，已经找到了一种使用边框而不是倾斜来实现此目的的方法。

这是我的代码...

.box {
  width: 300px;
  height: 200px;
  background: red;
  margin: 50px 0 0;
}
.box:before {
  content: "";
  width: 100%;
  height: 0;
  border-top: 30px transparent solid;
  border-right: 300px green solid;
}

&lt;div class="box"&gt;&lt;/div&gt;

但现在是另一个问题。上面的代码对于想要制作具有固定宽度的 div 的任何人都很有用。如果我想将此 div 用作 100% 的宽度，但我不能在我的 css 的边框中添加 % 怎么办？

任何建议将不胜感激:)

【讨论】：

【解决方案2】：

也许你想要这样的东西？

我用了三个divs。一个父 div，和两个 divs 在父 div：

HTML：

<div class="container">
    <div class="top"></div>
    <div class="main"></div>
</div>

CSS：

body {
    margin:50px;
    min-width:400px;
    background:white;
}
.container{
    width: 300px;
}
.top{
    with: 100%;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 300px solid transparent;
}
.main {
    background-color: red;
    width: 100%;
    height: 200px;
}

FIDDLE

【讨论】：

是的，这就是我已经做过的......但它的宽度是固定的。我们可以让它变得灵活吗？