0

我有一个图像。最近我为此使用了图像。但我认为 css 形状会比使用这种形状更好。所以有人可以告诉我如何只在css中得到这个形状。我不想在这里使用图像。任何帮助和建议都将是非常可观的。谢谢...图片在这里

在此处输入图像描述

4

7 回答 7

3

仅使用 HTML 和 CSS 创建了这个。演示

来自http://css-tricks.com/examples/ShapesOfCSS/的灵感

HTML

<div>
    <div id="triangle-topleft"></div>    
    <div id="triangle-topright"></div>
</div>

CSS

div{
    float:left;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 80px solid transparent;

}
#triangle-topright {
    width: 0;
    height: 0;
    margin-left:-5px;
    border-top: 100px solid red;
    border-left: 100px solid transparent;

}
于 2013-08-19T12:17:10.683 回答
1

小提琴

标记是<div></div>

css

div:before
{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 40px 0 0;
    border-color: #63071e transparent transparent transparent;
}

div:after
{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 40px 20px 0;
    border-color: transparent #63071e transparent transparent;
    margin-left: -6px;
}
于 2013-08-19T12:14:29.070 回答
0

I am very new to stackover flow so will take sometime to adjust to its editor so please overlook my way of presenting the answer.

CSS :

tri1{width: 0px;height: 0px;border-style: solid;border-width: 200px 200px 0 0;border-color: #007bff transparent transparent; }

tri2{padding-right:200px;margin-top:-200px;width: 0px;height: 0px;border-style: solid;border-width: 0 200px 200px 0;border-color: transparent #007bff transparent transparent; }

now fix the height and width as per ur needs.

于 2013-08-19T12:29:35.317 回答
0

以下是基本思想。怎么做。但是您可以使用定位或标记。

HTML

<div>
    <span></span>
</div>

CSS

div {
     width: 0; 
     height: 0; 
     border-left: 0 solid transparent;
     border-right: 50px solid transparent;
     border-top: 20px solid #f00;
     position:relative;
}
span {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 0 solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    top:-20px;
    left:50px;
}
于 2013-08-19T12:14:33.153 回答
0 
.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}

小提琴演示

于 2013-08-19T12:10:20.397 回答
0

这是用谷歌搜索的？？

请看以下链接：

http://www.howtocreate.co.uk/tutorials/css/slopes

或至少参考这里提出的问题

使用 CSS 切角

于 2013-08-19T12:11:00.037 回答
0 
<style>
.triangle { width:0px;
border-bottom: 30px solid transparent;
border-left: 60px solid #FF0000;
border-right: 60px solid #FF0000;
border-top: 0; }
</style>
<div class="triangle"></div>

在这里演示http://jsfiddle.net/EfxEj/

于 2013-08-19T12:12:42.297 回答