1

この画像（添付）を持っています。私はデザイナーではありませんが、アプリで画像を使用したくありません。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;

上記の問題は、テキストに背景がなくなったことです... background-colorを使用する場合は、border-left：10pxの白一色を使用する必要があります。これは、このレイヤーのように、さまざまな背景画像で見栄えがよくありません。画像の上に座ってください。

4

8 に答える 8

3

HTML要素のスタイルを設定できるという意味で、そうです、そのような形状を作成することができます。それを達成するには、複数のDIVを使用する必要があります。これは、境界線スタイルを使用して基本的な幾何学的形状を作成するための優れた概要を提供するサイトです。

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

于 2012-08-15T21:41:33.810 に答える
3

ある場合は<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デモ

編集：または、透明な矢印を使用した簡単なデモ-ここでは、基本的にトリッキーな境界線に異なる境界線の色を使用し、矢印を左に移動する方法を使用しました-私が使用position: relativeしました-divの背景が下にあるものをカバーしないようにします。

于 2012-08-15T21:45:59.180 に答える
3

「アプリで画像を使用したくない」というのはかなり漠然とした要件であるため、データURIが適切な代替手段であることがわかります。

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

私はこれらを控えめに使用するのが大好きです-画像が外部の場合、追加のhttpリクエストの必要性を排除し、重いスプライトほど多くのレンダリングリソースをクライアントに必要とせず、（ほとんどの些細な場合を除いて）あなたよりもシンプルなグラフィックスで）CSS3エフェクトよりもレンダリングが速くなります。

編集： base64エンコーディングはいくつかのLESS / SASS css前処理実装の一部であり、1回限りの使用に使用できるオンラインエンコーダーがあります。たとえば、これです（データuriからすべての改行を削除することを忘れないでください）

いじる

于 2012-08-15T22:24:23.130 に答える
2

外部の画像ファイルへのリンクを避けたい場合は、画像を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を使用しましたが、タグのsrc属性に同じURLを使用することもできます。<img>

于 2012-08-15T21:56:38.187 に答える
1

開始するための例を次に示します。

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/

于 2012-08-15T21:46:05.390 に答える
1

ベクター画像が必要なようです。HTML svgタグを使用して、ポリゴンを作成できます。

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

于 2012-08-15T21:47:05.787 に答える
0

これがあなたができることの良いスタートです。

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

参照：動作中

于 2012-08-15T21:52:05.063 に答える
0

ここではまだ疑似要素を使ったアプローチを見たことがないので、ここに追加しようと思いました。これは、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>

于 2015-03-26T09:27:46.453 に答える