SVG

HTML&CSS

CSSのborderで切手風フレームを作成

border-image-sourceの値に、円を描画した画像を設定します。ここで円の色(sgvのfillの値)は、親要素と同色にしておきます。 それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。
2022.07.15
HTML&CSS

CSSのborder-image-sourceの値にSVGコードを指定し、星やハートのボーダーを作成する方法

重要なのがborder-image-sliceです。 指定された画像を縦横3分割にし、上下左右のボーダーに割り当てます。 ボーダーに使用するシェイプを縦横3×3配置するSVGコードを作成し、border-image-sourceの値にしました。
2022.07.05
HTML&CSS

千鳥格子模様をSVGとCSSで背景模様にする

千鳥格子模様をSVGで作成し、CSSのbackground-imagプロパティで背景模様にします。CSSで背景模様にするには、background-imagの値のURLにSVGタグを埋め込むのですが、変更を加える箇所があります。
2022.07.06
HTML&CSS

イラストレーターなし ハートのSVGタグを作成する方法

開始点、ベジェ曲線の方向点、下部の先端の座標と、上部の円弧の半径が分かれば描画できます。可愛らしいハートにするため座標を変更してみました。ジェネレーターで簡単にSVGタグが作成できます。塗色fillと同色のstrokeを太めにすると、ハートの上部の二つの円の溝を埋めることができます。
2022.07.13
HTML&CSS

JavaScriptで座標を計算 SVGで星を作成

SVGで多角形を描画するpolygonタグのpoints属性の値(座標)を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。
2022.06.09
スポンサーリンク
タイトルとURLをコピーしました