3

很抱歉问这种类型的问题。但我想知道我有一个Parent Divwithheight和widthas100px它看起来像正方形。有没有一种方法可以单独自定义宽度，例如top-width和bottom-width

例如 width适用于left to right并且height适用于top to bottom Iftop-width is zero和bottom width is 100，height is 100那么它看起来像triangle Here is the FIDDLE 我想用不同的形状做同样的方式。是否有可能在css中实现这一点。任何建议都会很棒。

4

5 回答 5

3

好吧，类似的东西在 CSS 中是不存在的。有一些技巧，比如使用 :before 和 :after 选择器来组合多个元素以使事情看起来像预期的那样，请参阅这个形状列表，但它们不会像你预期的那样表现。如果不使用一点 Javascript，文本流之类的东西将无法以这种形式工作。

于 2013-09-25T06:43:27.307 回答
3

不，这是不可能的，而是为了制作三角形或梯形等形状，我们在小提琴中使用这样的边框宽度：

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    margin:20px auto;
}

http://jsfiddle.net/7qbGX/

我们将 div 的主要内容设为 0 高度和 0 宽度。然后使用边框宽度来解决问题。

诀窍是，边界在相框的角落相遇。因此，如果我们使两个边框不可见并减小一个边框的大小。它将形成一个三角形的形状。有关更多详细信息，您可以参考这个问题。

干杯！

于 2013-09-25T06:44:27.100 回答
0

由于您的有趣问题，找到了这个非常有趣的帖子：

http://css-tricks.com/snippets/css/css-triangle/

于 2013-09-25T06:42:56.553 回答
0

小提琴

#sample {
    width: 0;
    height: 0;
    border-bottom: 120px solid green;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

和来源

于 2013-09-25T06:43:59.863 回答
0

据我所知，没有办法用你的方式这样做。但是，transform尽管您仍然需要使用它，但仍有可能有助于实现您想要的属性。检查此或此以获取更多详细信息:)

于 2013-09-25T06:44:40.807 回答