Webデザイナー(CSSに詳しい奴)来てくれ

**風吹けば名無し** · 2024/02/06(火) 01:51:37.38

赤い丸で囲ったトレンドの下にあるボーダーってどうやって表現するんや
ただのボーダーやなくて上左右が丸くなっとるボーダーにしたいんや

https://imgur.com/8XRNVS6

**風吹けば名無し** · 2024/02/06(火) 01:52:58.19

ボーダーラディウスや

**風吹けば名無し** · 2024/02/06(火) 01:54:07.49

>>2
出来へん
文字の下の緑の線みたく出来ないんや

**風吹けば名無し** · 2024/02/06(火) 01:55:01.73

左上と右上だけに設定すればいけるやろ

**風吹けば名無し** · 2024/02/06(火) 01:55:50.76

なにができねーんだよ

**風吹けば名無し** · 2024/02/06(火) 01:57:26.66

>>4
どういうことや
border-bottomの左上と右上のborder-radiusが指定できるプロパティがあるんか？

**風吹けば名無し** · 2024/02/06(火) 01:57:33.92

DevToolsでその要素のCSS見て真似するだけやないの

**風吹けば名無し** · 2024/02/06(火) 01:58:42.68

>>5
赤丸で囲った文字の下にある線があるやろ
その線の左上と右上を丸くしたいんや

**風吹けば名無し** · 2024/02/06(火) 01:59:26.88

フツーにそのサイトのソースパクったらええやん

**風吹けば名無し** · 2024/02/06(火) 01:59:47.59

ググって来たでここ参考にならんかな
ttps://developer.mozilla.org/ja/docs/Web/CSS/border-radius

**風吹けば名無し** · 2024/02/06(火) 01:59:47.86

こう

**風吹けば名無し** · 2024/02/06(火) 01:59:50.87

>>7
ワイデザイン弱者でDevTools見てもさっぱり分からんのや
あとこれをTailwind CSSで再現したいからどういうカラクリなのかちゃんと理解したいんや

**風吹けば名無し** · 2024/02/06(火) 02:00:25.49

border-radius: 25% 25% 0% 0%;
みたいな感じでいけるやろ

**風吹けば名無し** · 2024/02/06(火) 02:01:06.64

>>11
なるほど
それどうやって書くんや
ワイCSS初心者やから分からんのや

**風吹けば名無し** · 2024/02/06(火) 02:02:07.89

>>13
これでええやん

**風吹けば名無し** · 2024/02/06(火) 02:02:35.10

>>12
上でも出てるけどborder-radius で左上と右上の角丸の半径を要素の高さにしてるんちゃうの知らんけど
DevToolsで値いじって調べるのが一番早い

**風吹けば名無し** · 2024/02/06(火) 02:02:35.74

**風吹けば名無し** · 2024/02/06(火) 02:03:31.68

>>9
原理を理解したいんや
んでそれをTailwind CSSに書き直したい

**風吹けば名無し** · 2024/02/06(火) 02:05:25.29

nextjsやとuseRouter使えば一瞬やで

**風吹けば名無し** · 2024/02/06(火) 02:05:28.73

WEBデザイナーわらわらやな。
そんな人気の職業なんか？

**風吹けば名無し** · 2024/02/06(火) 02:06:50.89

>>17
これやと文字の周りにただ丸みの帯びた枠線がつくだけやないか？

**風吹けば名無し** · 2024/02/06(火) 02:07:11.62

そもそもイッチは何の言語とかフレームワークでサイト作っとるんや？

**風吹けば名無し** · 2024/02/06(火) 02:07:11.77

>>18
これ少し下にスクロールした奴でええんやないの
rounded-t-lg とかいうクラス

https://tailwindcss.com/docs/border-radius

**風吹けば名無し** · 2024/02/06(火) 02:07:24.89

>>20
ニートでもwebデザインはできる

**風吹けば名無し** · 2024/02/06(火) 02:09:44.10

>>22
素のGoだけでサイト作ってるやで
フロントエンドはからっきしやから勉強中や

**風吹けば名無し** · 2024/02/06(火) 02:12:03.39

>>23
これやと上の枠線の左上と右上だけ丸くなってまう
ワイがやりたいのは下の枠線の左上と右上を丸くしたいんや

**風吹けば名無し** · 2024/02/06(火) 02:12:29.12

>>19
ほんまか

**風吹けば名無し** · 2024/02/06(火) 02:13:32.41

Qiitaのデザイナー凄すぎやろ
パッと見た感じなんてことはないデザインやが実装するの難しすぎるわ

**風吹けば名無し** · 2024/02/06(火) 02:14:18.34

>>16
せやな
弄って調べてみるわ

**風吹けば名無し** · 2024/02/06(火) 02:14:55.09

開発者モードからソースコード見れないの？

**風吹けば名無し** · 2024/02/06(火) 02:15:20.36

>>13
これやと文字の上にある枠線が丸くなるだけや

**風吹けば名無し** · 2024/02/06(火) 02:15:55.15

>>30
見れるけど難しすぎんねん
フロントエンド弱者のワイが見てもさっぱりや

**風吹けば名無し** · 2024/02/06(火) 02:21:48.95

>>32
qiita見てきたわ
この緑のボーダーはトレンドの下辺じゃなくて別モンやん
緑のボーダー自体の高さが4pxだから普通にラディウスで4pxを上左と上右に指定してるだけ

**風吹けば名無し** · 2024/02/06(火) 02:25:26.84

::afterで擬似要素作っとる