Twitterのアイコンを六角形にしてみた

2018年2月6日技術

この記事は2018年2月6日に書かれたものです。ご注意ください。

タイトルの通りです。
以下のCSSを適用することで各種アイコンが六角形になります。

/**************************
　アイコンを六角形に
**************************/
/* DM */
.DMAvatar,
/* Following, Followers */
.ProfileCard-avatarLink, .ProfileCard-avatarImage,
/* Followers you know */
.ProfileUserList .Avatar,
/* Header */
.nav .session a.dropdown-toggle, .Avatar,
/* Home */
.DashboardProfileCard-avatarImage, .DashboardProfileCard-avatarLink,
/* List */
.ProfileListItem-avatar,
/* Moment */
.MomentCapsuleItemTweet--withText .MomentUserByline-avatar,
/* Profile */
.ProfileAvatar-image, .ProfileAvatar-placeholderImage, .ProfileAvatar,
/* Tweet */
.avatar,
/* You may also like */
.RelatedUsers-users>.account-summary .avatar,
/* CSS */
.HexagonCSS {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0%;
}
/* Home */
.DashboardProfileCard-avatarLink {padding:0;border:3px solid #fff;}
.DashboardProfileCard-avatarImage {border:0;}

お察しの通り意味はありません。