4

上向きの矢印が付いたコンテナを作ろうとしています。私は境界線描画のトリックに精通しており、それが解決策の可能性が高いと思いますが、em または px で境界線を指定する必要があるため、既知のサイズでのみ機能すると思います。

作りたい形はこんな感じです。

          .
         / \
        /   \
       /     \
      | flex  |
      |       |

コンテンツ領域は、親コンテナーのパーセンテージとしてさまざまなサイズに変更できます。

問題のある領域にフラグが付けられた CSS は次のとおりです。

.metric {
    display: inline-block;
    position: relative;
    height: 150px;
    width: 50%;
    background: lawngreen;
}

.metric:after {
    position: absolute;
    top: -25px;
    left: 0;
    content: '';
    background: white;
    width: 100%;
    height: 0;
    border: 75px solid white; /* this fixed width is the problem */
    border-top: none;
    border-bottom: 25px solid lawngreen;
    box-sizing: border-box;
}

これがjsfiddleです：http://jsfiddle.net/C8XJW/2/

皆さんはこれをやってのける方法を知っていますか?

4

4 に答える 4

5

ここに別の可能性があります。

これは、グラデーションの背景でトリックを行います。対角線が簡単に得られるように、それらのうちの 2 つが必要です。

関連する CSS:

.metric:before, .metric:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.metric:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}

更新されたフィドル

Simple As Could Beソリューションとの違い:

Pro透明コーナー (背景がある場合に関連)

悪いブラウザのサポート

于 2013-07-02T20:48:43.737 に答える
2

これが1つの優れたソリューションです。基本的に、矢印を常に中央に配置し、必要以上に大きくしますが、オーバーフローを切り取ります。

JSFiddle は次のとおりです: http://jsfiddle.net/nBAK9/4/

そして、興味深いコードは次のとおりです。

.metric:after {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -250px;            /* max expected width /2 */
  content: '';
  background: white;
  width: 500px;                   /* max expected width    */
  height: 0;
  border: 250px solid white;      /* max expected width /2 */
  border-top: none;
  border-bottom: 50px solid #cf6; /* This size adjusts the slope of the triangle */
  box-sizing: border-box;
}
于 2013-07-02T20:22:51.670 に答える
0 
.top-arrow:before, .top-arrow:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.top-arrow:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, black 50%);
}
.top-arrow:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, black 50%);
}


<div class="top-arrow"></div>
于 2014-08-15T08:58:50.143 に答える