在css中制作图像形状？

Question

我有一张照片。最近我使用了图像。但我觉得使用这种形状后，css的形状会更好。所以有人可以告诉我如何只在CSS中获得这种形状。我不想在这里使用图片。任何帮助和建议都会非常明显。谢谢... 图像在这里

Answer 1

仅使用HTML和CSS创建它。 DEMO

来自的灵感 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;

}

Answer 2

<强> FIDDLE

标记为<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;
}

Answer 3

.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}

FIDDLE DEMO

Answer 4

这是用Google搜索的吗？

请参阅以下链接：

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

或至少提到这里提出的问题

Cut Corners using CSS

Answer 5

<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/

Answer 6

以下是基本想法。怎么做。但是你可以玩定位或标记。

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;
}

Answer 7

我对stackover flow很新，所以需要一些时间来调整它的编辑器，所以请忽略我提出答案的方式。

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：   透明＃007bff透明透明; }

现在根据您的需要确定高度和宽度。