生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现超美选项卡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
純靜態的，后續的內容可以自己加上去喲！！！
<!DOCTYPE html
>
<html lang
="zh">
<head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><meta http
-equiv
="X-UA-Compatible" content
="ie=edge"><title
></title
><style type
="text/css">body
{background
-color
: black
;}.main
{width
: 33.33%;height
: 200px
;background
-color
: aliceblue
;margin
: 150px auto
;position
: relative
;border
-bottom
-right
-radius
: 15px
;border
-bottom
-left
-radius
: 15px
;}.tabs
{width
: 100%;position
: absolute
;top
: -50px
;left
: 0;display
: flex
;align
-items
: flex
-end
;text
-align
: center
;font
-size
: 18px
;}.tabs
.item
{width
: 60%;height
: 50px
;background
-color
: #fff
;border
-top
-left
-radius
: 15px
;border
-top
-right
-radius
: 15px
;position
: relative
;line
-height
: 50px
;}.tabs
.items
{width
: 40%;height
: 40px
;background
-color
: #
FEF0F1;border
-top
-right
-radius
: 15px
;line
-height
: 40px
;}.tabs
.item
::after
{content
: '';width
: 0;height
: 0;position
: absolute
;bottom
: 0;right
: -50px
;border
-top
: 42px solid transparent
;border
-left
: 21px solid #
FFFFFF;border
-right
: 30px solid transparent
;}.active
{color
: #
FD2D3B;}</style
>
</head
>
<body
><div
class="main"><div
class="tabs"><div
class="item active">微信分享
</div
><div
class="items">朋友圈分享
</div
></div
></div
>
</body
>
</html
>
總結
以上是生活随笔為你收集整理的纯CSS实现超美选项卡的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
