将图像转换为CSS [英] turning an image into css

问题描述

我有这张图片（附上）。我不是一个设计师，但我不想使用我的应用程序中的图像。我听说你可以非常接近使用CSS的图像。

https://i.stack.imgur.com/eYR2e.pngalt =enter image description here>

TRIED

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

不知道如何将它添加到我当前的css
ALSO TRIED

  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 solid white，这将不会看起来不错的背景图片，因为这一层将坐在图像上。

解决方案

如果您有< 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三角形。

jsFiddle演示

EDIT：或使用透明箭头的快速演示 - 这里您基本上使用不同的边框颜色和一个将箭头移动到左边的方法 - 我使用 position：relative - 所以div的背景不会覆盖下面的内容。 p>

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent

thanks!

TRIED

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

Not sure how to add that to my current css ALSO TRIED

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;

Issue with above is that my text has no background anymore... if I use background-color, then I will have to use border-left: 10px solid white, which is not going to look good on different background images as this layer will sit on top on an image.

解决方案

If you have <div class="magic">, you could apply this style:

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

​Change dimensions to your own taste. This trick is called CSS Triangle.

jsFiddle Demo

EDIT: Or a quick demo with a transparent arrow - here you basically use different border colors for the tricky borders and a way to move the arrow to the left - I used position: relative - so the div's background won't cover what is underneath.

这篇关于将图像转换为CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！