30

左側に 4px の太さのピンク、他の場所に 1px のグレーの境界線が必要です。

border: 1px solid #E5E5E5;
border-left: 4px solid #F24495;

問題は、結合が斜めであるため、ひどいオーバーレイが表示されることです。私は試した：

.item:before{ 
  border-left: 4px solid #F24495;
}

しかし、運がありません。

jsFiddle の例

スクリーンショット

スクリーンショット

4

4 に答える 4

35

.item::beforeborder-leftは正しいアプローチでしたが、単一のプロパティを超えて少し作業が必要です。疑似要素を可視にし ( display: block; content: "";)、疑似要素を の左側に配置し.item、上下の境界線に合わせて引き伸ばす必要があります。

これは手動で行うこともできますが、CSS 変数(またはプリプロセッサの変数) を使用することを強くお勧めします。

.item {
  display: inline-block;
  padding: 0.2em 0.3em;
  background: #f8f8f8;
  color: #454545;

  /* Set border widths with variables */
  --top-border-width: 4px;
  --bottom-border-width: var(--top-border-width);
  --left-border-width: 16px;
  --right-border-width: var(--top-border-width);

  /* Set border styles for each side */
  border-top: var(--top-border-width) solid #e4e4e4;
  border-bottom: var(--bottom-border-width) solid #e4e4e4;
  border-right: var(--right-border-width) solid #e4e4e4;

  /* Remove the left border and add blank space where the border should be placed */
  border-left: 0;
  margin-left: var(--left-border-width);

  /* Contain the ::before */
  position: relative;
}

.item::before {
  /* Give the pseudo element substance */
  display: block;
  content: "";

  /* Add a left border with a straight edge */
  border-left: var(--left-border-width) solid #f84995;

  /* Position pseudo element's border where the normal border would have been placed */
  position: absolute;
  top: calc(0px - var(--top-border-width));
  bottom: calc(0px - var(--bottom-border-width));
  left: calc(0px - var(--left-border-width));
}
<h1 class="item">Gen.2</h1>

于 2012-06-15T14:15:42.820 に答える
6

これは機能するはずですが、追加のマークアップが必要です。

.outer {
    border: 1px solid #E5E5E5;
    border-left: 0;
}

.inner {
    border-left: 4px solid #F24495;
}

と

<div class="outer">
    <div class="inner">
        ...
    </div>
</div>
于 2012-06-15T14:07:26.777 に答える
6

疑似セレクターを使用する場合は、:beforeいくつかのコンテンツも設定する必要があります。たとえば、次のサンプル コードを含むこの jsfiddleを参照してください。

<div>Container</div>

CSS:

div {
    border: 10px solid black;
    border-left-width: 0;
}
div::before {
    border: 10px solid orange;
    border-right-width: 0;
    content: '';
}

次のように表示されます。

作業コードのスクリーンショット

編集
うーん、これは質問に厳密に答える必要がありますが、私の解決策を質問のフィドルに適合させようとしているときに、これはパディングではうまく機能しないことがわかりました。そのビットを処理できる提案/編集/その他の回答を受け入れます:(...

于 2012-06-15T14:14:35.560 に答える