将图像转换为 css答案

【问题标题】：turning an image into css将图像转换为 css
【发布时间】：2015-03-26 17:28:14
【问题描述】：

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

谢谢！

尝试过

<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纯白色，这在不同的背景图像上看起来不太好，因为该层将位于图像的顶部。

【问题讨论】：

您收到了反对票，因为该问题没有显示任何研究工作 - 您基本上是在要求我们为您做这件事，这在 SO 上是不受欢迎的。
首先，您发布的代码似乎可以正常工作，您能告诉我们到底哪里出错了吗？其次，你为什么不想在你的设计中使用图像？为这样的形状使用背景图像比使用 CSS 边框技巧或 SVG 绘制多边形更具语义和清晰。
它在图像的 div 中正确添加文本
@MikeDeck 我认为 - CSS 不需要是语义的。对简单的箭头使用边框技巧似乎完全可以接受，但这只是一种意见。
背景图片没有语义。纯属装饰。

标签： css css-shapes

【解决方案1】：

如果你有<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 - 在这里，您基本上使用不同的边框颜色来处理棘手的边框以及将箭头向左移动的方法 - 我使用了 position: relative -所以 div 的背景不会覆盖下面的内容。

【讨论】：

这个问题是它位于图像的顶部，并且该图像的背景并不总是白色......所以它在其他彩色图像上看起来很尴尬。
@Autolycus 我不太明白你的意思。你能创建一个演示吗？或者你的意思是白色箭头应该是透明的？你为什么没有在你的问题中提到它？
是的，白色箭头应该是透明的。抱歉没有提到问题
@Autolycus 还是可以的。 Quick demo 但仍然可以玩。
+1 进行精彩编辑！不过，您确实应该使用content: '';，否则您当前的设置可以看到该点！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

我非常喜欢谨慎使用它们——如果图像是外部的，它们不需要额外的 http 请求，它们不需要客户端上的渲染资源，因为它们是重的精灵（除了图形的大多数琐碎情况比你的更简单）渲染速度比 CSS3 效果快。

编辑： base64 编码是一些 LESS/SASS css 预处理实现的一部分，并且有可一次性使用的在线编码器，例如 this one（请记住删除所有行从数据 uri 中断）

Fiddled

【讨论】：

@Autolycus：除非它会任意更改（静态资源不应该 - 至少不像那样），否则下载、编码和包含图像都没有问题进入你的CSS

【解决方案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>

在本例中，我为 background-image css 属性使用了图像数据 URL，但您也可以为 <img> 标记的 src 属性使用相同的 URL。

【讨论】：

【解决方案5】：

您似乎想要一张矢量图像。您可以使用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/

【讨论】：

【解决方案6】：

下面是一个帮助您入门的示例：

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/

【讨论】：

请不要用单个 jsFiddle 链接回答问题。尝试将代码的相关部分编辑到您的答案中。

【解决方案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

【讨论】：

【解决方案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;
  }

&lt;div&gt;&lt;/div&gt;

【讨论】：