iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
1
自我挑戰組

網頁學習紀錄系列 第 24

鐵人賽 Day24 人員卡片介紹-三角形裝飾

用 CSS 寫出方形不太困難,但寫出三角形真的是滿酷的一件事情,
不用圖片本身去製作,而是直接用 CSS 來製作三角形的遮罩感,
想要呈現的如下圖:
https://ithelp.ithome.com.tw/upload/images/20190927/20119300eGMr1tq0U9.png

這次算是學到了一點新東西,HTML 這次完全沒有更動,
(好啦~其實有更動中文假字的部分,因為我耍白癡,忘了調整瀏覽器的百分比,一直維持在 50%,想說畫面看起來怎麼這麼會這麼多字...)

這次CSS增加了幾個地方,如中文所示,原本 .card 的設定也改成用像素編寫

.card {
    width: 385px;
    margin: 15px;
    background-color: #fff;
    border: 1px solid #a8a8a8;

    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        // 在圖片中置中對齊
    }

    h2 {
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #333333;
        padding-bottom: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

    P {
        line-height: 1.5;
        text-align: left;

    }

    .text {
        padding: 1em;
        position: relative;
        // 設定絕對定位的父元素在卡片的文字中

        &:before {
            content: '';
            //偽元素要搭配 content 不然會失效
            width: 0;
            height: 0;
            position: absolute;
            // 用絕對定位,將 display 轉為 Block
            left: 0;
            top: 0;
            // 讓三角形在定位中靠左靠上對齊
            border-top: 50px solid transparent;
            // 設定線條為transparent透明
            border-left: 184px solid #fff;
            border-right: 184px solid #fff;
            // 將左右的線條改為白色
            transform: translateY(-100%);
            // 使用變形然後位移-100%
        }
    }

}

比較重要的是增加絕對定位的概念,還有「偽元素」的使用,雖然還很菜,但至少學會一招,
transform 我是看卡柏斯老師的這一篇【CSS沒有極限 - CSS transform-origin】

用 CSS 寫三角形真的滿酷的,這一篇基本上就是按照 Amos 老師的寫法找樣參考,順便透過老師的教學理解思維規劃與路徑,滿充實的一次,繼續加油!!

附上 codepen https://codepen.io/hnzxewqw/pen/GRKLaoQ
建議可以轉換成 full page view view 會比較完整呈現頁面~


上一篇
鐵人賽 Day23 人員卡片介紹-基本架構
下一篇
鐵人賽 Day25 人員卡片介紹-互動效果 transform
系列文
網頁學習紀錄30

1 則留言

1
CSScoke
iT邦新手 4 級 ‧ 2019-10-01 20:52:35

幫補充一下,使用我的方式寫的三角形,支援度會比使用 transform 要來的高喔

Tim Hsu iT邦新手 5 級 ‧ 2019-10-08 13:29:29 檢舉

好的,感謝 Amos 老師!! 老師寫扣的速度真是太神啦!!相信一定是非常融會貫通的了!!

我要留言

立即登入留言