border - 角を丸くするのではなく、面取りしたCSSボーダーコーナーを実現するにはどうすればよいですか?

Question

CSSborder-radiusプロパティを使用すると、端に丸みを帯びた曲線のボーダー コーナーを作成できます。

.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    border-left: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 0 10px;
}

でも下の画像のようなボーダーコーナーが欲しい。2 つのボックス (イエローとピンク) が互いに接していて、一番下のミーティング ポイント (点線のコーナー) に粗いコーナーが必要な場合、どうすればよいですか?

それはCSSを使用して可能ですか？

Answer 1

CSS3 グラデーションはそのトリックを行うことができます:

これを試してください、 Here's a Fiddle .

div {
  background: #c00;
  /* fallback */
  background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}


/* Ignore the CSS from this point, it's just to make the demo more presentable */

div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 15px;
  color: white;
  line-height: 1.5;
}

<div>Div 1</div>
<div>Div 2</div>

Answer 2

境界線がなく、透明でないなど、いくつかの欠点がありますが、次の方法があります。

.left,
.right {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}

.left {
  background: lightpink;
}

.right {
  background: lightblue;
}

.right::after,
.left::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
}

.right::after {
  left: 0;
  border-top: 10px solid lightblue;
  border-right: 10px solid lightblue;
  border-left: 10px solid white;
  border-bottom: 10px solid white;
}

.left::after {
  right: 0;
  border-top: 10px solid lightpink;
  border-right: 10px solid white;
  border-left: 10px solid lightpink;
  border-bottom: 10px solid white;
}

<div class="left"></div>
<div class="right"></div>

結果：

これがフィドルです。

Answer 3

これは、「clip-path」を使用しても可能です。

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

div {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

<div></div>

ソースコードペン

clip-path のサポートはここにあります... http://caniuse.com/#search=clip-path

Answer 4

最初に @thordarson ソリューションを でテストしましたposition: 'absolute'。

position: 'absolute',
top: '2.9rem',
left: '2.6rem',
borderLeft: '1rem solid #6CAEC6',
borderBottom: '0.7rem solid white',

これは、最初の図に示すように、ほとんどのデバイスで問題なく機能しましたが、iPhone やタブレットで使用すると、奇妙な線が表示され始めました。

@Collinsの回答として、使用を開始しましclip-path: polygonたが、正しい形状を得るのにかなり苦労しました。次に、本当に役立つサイトを見つけました。

https://bennettfeely.com/clippy/

それらは、目的の形状にドラッグできる準備が整った形状を提供します。

必要なコーナーについては、Web サイトから正しい値をコピーできました。

私たちの要件は 35° の角度で、それを正しく行うために次のサイトを使用しました。

https://www.ginifab.com/feeds/angle_measurement/

私はどのサイトとも提携していませんが、私が欲しかったものを手に入れるのを本当に助けてくれました. 要件として持っclip-path: polygonて-webkit-clip-path: polygonいたすべてのデバイスとブラウザーで動作しました。

互換性チェック:

https://caniuse.com/#feat=css-clip-path

Answer 5

これをアーカイブする最良の方法: border-images。.svg良い解決策と組み合わせて...