Question

我有这张图片（附上）。我不是设计师，但我不想在我的应用程序中使用该图像。我听说你可以使用css非常接近图像。有人可以帮助我使用这个图像并转换为css等效的

谢谢！

enter image description here

受审

<span class="xyz">
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/>
   </svg>
   text
</span>

不确定如何将其添加到我当前的CSS中 还试过

display: block;
clear: both;
width: 70%;
height: 2%;
float:right;
margin-top: -50%;
margin-right: 2%;
border-left: 10px solid transparent;
border-top: 4px solid #546aa4;
border-bottom: 4px solid #546aa4;

上面的问题是我的文字已经没有背景......如果我使用背景颜色，那么我将不得不使用border-left：10px纯白色，这在不同的背景图像上看起来不太好此图层将位于图像的顶部。

Answer 1

从某种意义上说，HTML元素可以设置样式，是的，可以创建这样的形状。你必须使用多个DIV才能完成它。这是一个使用边框样式创建基本几何形状的概述：

http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

如果您有<div class="magic">，则可以应用此样式：

.magic { 
    width: 200px; 
    height: 50px; 
}
.magic:before {
    content: '.';
    float: left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid white;
    border-bottom: 25px solid transparent;
}

根据自己的喜好改变尺寸。这个技巧称为CSS Triangle。

jsFiddle Demo

编辑：或者带有透明箭头的quick demo - 这里你基本上使用不同的边框颜色来处理棘手的边框以及将箭头向左移动的方法 - 我使用了{{ 1}} - 所以div的背景不会覆盖下面的内容。

Answer 3

使用“我不想在我的应用中使用图片”是一个相当含糊的要求，您可能会发现data URIs是一个合适的选择：

.xyz{
  background:url(data:image/png;base64,/*encoded image*/);
}

我非常喜欢使用这些 - 如果图像是外部的，他们不需要额外的http请求，他们不需要像客户那么多的渲染资源，而且他们是（除了图形简单比你的图形更简单

的大多数琐碎案例）比CSS3效果渲染更快。

编辑： base64编码是一些LESS / SASS css预处理实现的一部分，并且有一次性使用的在线编码器，例如this one（只需记住删除来自数据的所有换行符）

Fiddled

Answer 4

如果你想要做的就是避免链接到外部图像文件，你可以直接在css或html中嵌入图像。

以下是一个例子：

<!doctype html>
<html>
<head>
   <title>CSS Image Data Example</title>
   <style>
      #imgHolder {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAvCAYAAACmGYWkAAADs0lEQVR42u2dS2sVSRSAjRoyGh8bNyKIiO+NgiCIOPhaGNQBb1clPggEF53b1bk4I4qIrwvqHxDECeqEpKqu4W5cCIIrt4rPhU9EGVz4REEFh9EZ4+mHN53Ef+B34IObe7t7ceCj6tSp6oxTxn0W/hO+CkMAMMw4ZewpbfwF+eOpfBZZPKIAfBdke1ibIYIsU5E7oI27KV/+Q2IAckGq1er4rq6+X3S3W6Jivz8w7r788IXkAIgg3yMMe5uDnr5FMooclx/uyojyLwkCBClEIklHPLhA6pBqYOwjueB/kgQIUgit6xN0RaZbxh6WCx6SJECQ0TE01LTt9/NzpB45KHXJg8B4ahJAkGIkxbs2dp5cZNKaJEYSQJARsTy80VwKe2fKdOuoXPxYMZIAgowdSTrifincbVVueCB8opkICDKqcN9qBheryB8SUW6pmCVgQJBRS8A3mnVkFwaROyI33s62pZBAQJARfZJUktjuSSVhJAEEGRlrqlcmBt1+voiyjz4JIMiPapJ6fYIu98/SMt3Sxr1RUbpdnoQCghQjiPxckeOYiHJHU5MAgoyNUmhnJnu3smYiNQkgyJg+SRDWFqnI7k+XgNPzJPRJAEFGbnCM7MKscLdXs2YiyQUEaURb5WTLDqlJRJI9MtW6l59zJ8mAIMWRJFsCdkfS8yRscAQE+cF0a3d9dsn4oypy15huAYKMPVDS1FZx09qN3a5ie51EA4IMR1P6EoiyXyFTrBOBcU9INCBIHp17L7cGkd8QxM5Lsf6UBiIgSD5ytFUutZTKbpWIcU4e/koZm7z0gZ4I/PSCNO2UmkNFdrU89LTwnDeiAII0eiCXWtpj/6uMGE54jRyAIIVlXdVj18jD/lRROnKQWECQVI4/6pNKxq8NIjcgD3vByAEIkvc5koNTiRza2Av5tIqEAoKkS7mdA60dFbs0ML5PHvKRfVeAIPnI0bl3oFVVzq9Wsf9LGc/IAQjSqDlMfYqK3XoV+TNy8zsSCAhS6HPontq6wNizWZ/DUpADgiSxa9e5qarcv1luqAXGPaPmAAQp9Dnay25VEDkvU6u3yAEIUnxRXLdbIqNGX1aQc9YcEKTRBMwKcntG6o4PJAsQpCCHjmsr071VvBQOEGT4P0slS7na2I3ZtIq9VYAgjSagDuvTdWQ3JatVwkvOcgCC5HJsCS9OTs5z6OQkYCYHfQ5AkCSSM+TZrlzbm29ZRw6ARJCOyuBS3WN/y6dV75EDoCCIFON/52LwcgWAUXwDOUawyI+Ht4oAAAAASUVORK5CYII=);
         width: 200px;
         height: 47px;
      }
   </style>
</head>
<body>
   <h1>Look, Ma, no external links!</h1>
   <div id="imgHolder">&nbsp;</div>
</body>
</html>

在这种情况下，我使用了背景图像css属性的图像数据网址，但您也可以使用src标记的<img>属性使用相同的网址。

Answer 5

这是一个让你入门的例子：

<强> HTML：

<div class="box">
    <div class="flag"></div>
</div>

<强> CSS：

.box {
    /* Set dimensions and color of containing box */
    width: 100px;
    height: 30px;
    background: #03e;
}

.flag {
    float: left;
    /* Set left border to control width and color of flag */
    border-left: 20px solid #fff;
    /* Set top and bottom border each to half of box height */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    width: 0;
    height: 0;
}

小提琴链接：http://jsfiddle.net/kHDFp/

Answer 6

似乎你想要一个矢量图像。您可以使用HTML svg tag创建多边形：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <polygon points="0,0 100,0 100,40 0,40 20,20"
   style="fill:#46b"/>
 </svg>

http://jsfiddle.net/XDtXV/

Answer 7

这是你可以做的好开始。

<style>
#button {
   width: 120px; 
   background: #546AA4; 
   border-left: 40px solid white;
   border-top: 24px solid transparent;
   border-bottom: 24px solid transparent;
}
</style>

<p id="button"></p>

请参阅：In Action

Answer 8

我还没有在这里看到使用伪元素的方法，所以我想我会在这里添加一个。这假设你给你的div设定了一个高度：

div{
  height:50px;
  width:200px;
  position:relative;
  margin-left:25px;
  background:tomato;
  }

div:before{
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  border-top:25px solid tomato;
  border-left:25px solid transparent;
  }


div:after{
  content:"";
  position:absolute;
  bottom:0;
  left:-25px;
  border-bottom:25px solid tomato;
  border-left:25px solid transparent;
  }

<div></div>

将图像转换为css

8 个答案: