web-dev-qa-db-ja.com

border-radiusを使用してCSS3で三角形を作成する方法

丸みを帯びた角を実現するために、border-radiusプロパティを使用しています。しかし、この形の角を丸くする方法がわかりません。どちらの側からも同じ寸法を付けてみましたが、正確な形状がわかりません。ここにCSS3プロパティがありませんか？.

enter image description here

クリップのcssプロパティが答えかどうか疑問に思っています。

更新：

http://jsfiddle.net/YWnzc/136/

htmlcsshtml5css3css-shapes
8
Mike

デモ

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

これにより、次のようになります。

enter image description here

この効果は、正方形を作成し、CSS変換で回転させ、角を丸め、外側のボックスで切り抜くことによって実現されます。内側の要素は必要に応じて調整できるため、ある程度柔軟性があります。

http://css3shapes.com/ いくつかの素晴らしい例があります（ページの下部にあるハートに注意してください）

代替案

SVG画像はこのタイプの形状をサポートし、最新のすべてのブラウザーでサポートされています。単純なSVGは手動でXMLとしてコーディングでき、それらを操作するためのさまざまな無料/有料のエディターがあります。

参照： Raphaël、Web上でベクターグラフィックを操作するためのライブラリ

20
Tim Medora

境界線の半径を持つさまざまなサイズの三角形

垂直方向の配置フォークを反転または変更するにはtranslateY（）およびrotate（）

/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }

/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }

/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }

/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }

/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }

/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
    overflow: hidden;
    position: relative;
    margin:2em auto;
    border-radius: 20%;
    transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
    position: absolute;
    background: #ccc;
    pointer-events: auto;
    content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
    background: #ccc;
    position: absolute;
    pointer-events: auto;
    content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
    border-radius: 20% 20% 53% 20%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) 
            skewX(-30deg) scaleY(.866) translateX(24%);
}
<div class="page-container">
    <div class="triangle-bg-lg"></div>
    <div class="triangle-bg-md"></div>
    <div class="triangle-bg-sm"></div>
    <div class="triangle-bg-xs"></div>
    <div class="triangle-bg-xxs"></div>
</div>
1
Varsha Dhadge

私があなたの質問を正しく理解したならば。私はあなたが以下のようなものを使うことができると思います：

CSS：

#box{   border-color: transparent transparent transparent #FFFFFF;
    border-style: solid;
    border-width: 50px 0 50px 75px;
    height: 0;
    left: -40px;
    margin: 40px;
    position: absolute;
    width: 0;
}
 #outerbox{  background:red;
    height: 300px;
    position: relative;
    width: 122px;
}

HTML

<div id="outerbox"><div id="box"></div></div>

ライブデモ

http://jsfiddle.net/fsGQR//

1
defau1t

直角三角形だけが必要な場合は、これで十分です。

#box {
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #990000;
  margin: 40px;
}​

Border-radiusは必要ありません。また、SVGも必要ありません。これはすべての最新のブラウザーとIE8 +で機能するはずです（私はまだIE8を最新と呼ぶのに苦労しています）。

デモ： http://jsfiddle.net/RCzAt/4/

CSSトライアングルの詳細： http://css-tricks.com/snippets/css/css-triangle/

1
MusikAnimal

これはさらに良いです

CSS

.c1 {
    width:50px;
    height:50px;
    background-color:yellow;
    -webkit-transform:rotate(45deg);
    position: relative;
    top: -65px;
    left: 25px;
    z-index:-1;
    border: 2px solid rgba(0,255,0,.6);
}
.c2 {
    width: 50px;
    height: 72px;
    background-color: yellow;
    z-index: 10000;
    border: 2px solid rgba(0,255,0,.6);
    border-right: 0;
}

HTML

<div class="c2">Hello</div>
<div class="c1"></div>

デモ： http://jsfiddle.net/YWnzc/237/

0
TheRealChx101
<!DOCTYPE html>
<html>
<head>
<style>

.trio {position:absolute;}
.trio .triangle {
    position: relative;
    background-color: #DB524B;
    text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
    width:  3em;
    height: 3em;
    border-top-right-radius: 33%;
}

.trio .triangle {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
    color: #DB524B;
    position:absolute;
    font-size:50px;
    top:8px;
    left:15px;
    z-index:2;
}

.trio .triangle.tri-in {
    background-color: #fff;
    margin-top: -2.9em;
    margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
    width:  2.9em;
    height: 2.9em;
    border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>
0
Sharan