Trung tâm cá nhân
sách gpt4 ăn đã đi

html - 带有 CSS 文本的顶部/直 Angular 三 Angular 形

In lại 作者：搜寻专家 更新时间：2023-10-31 08:40:31 27 4
mua khóa gpt4 giày nike

首先，我刚刚开始学习 HTML 和 CSS。

我想如何使用这段代码: https://codepen.io/martinjkelly/pen/vEOBvL 

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-right: 150px solid transparent;
}

.corner span {
  vị trí: tuyệt đối;
  top: 35px;
  chiều rộng: 100px;
  left: 5px;
  căn chỉnh văn bản: ở giữa;
  cỡ chữ: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display:block;
}

  
20% Special Offer

但我想在顶部/右侧制作三 Angular 形。

我尝试过的:

.corner {
  width: 0; 
  height: 0; 
  border-top: 150px solid transparent;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
}

.corner span {
  vị trí: tuyệt đối;
  top: 35px;
  chiều rộng: 100px;
  left: 5px;
  căn chỉnh văn bản: ở giữa;
  color: #ffffff;
  text-transform: uppercase;
  cỡ chữ: 14px;
  transform: rotate(45deg);
  display:block;
}

它可以工作，但文本放置不正确...

非常感谢您的帮助。

câu trả lời hay nhất

你必须做一些调整，因为三 Angular 形会自然地向左对齐，你不能把它旋转到另一个方向，你还需要使用绝对定位，让它在右边对齐。这也需要对文字的定位做一些调整:

.container {
  width: 250px;
  height: 250px;
  position:relative;
  background-color:grey;
}

.corner {
  width: 0;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-bottom: 150px solid transparent;
  border-left: 150px solid transparent;
  vị trí: tuyệt đối;
  right:0;
}

.corner span {
  vị trí: tuyệt đối;
  top: -110px;
  chiều rộng: 100px;
  left: -100px;
  căn chỉnh văn bản: ở giữa;
  cỡ chữ: 16px;
  font-family: arial;
  transform: rotate(45deg);
  display:block;
}

  
20% Special Offer

关于html - 带有 CSS 文本的顶部/直 Angular 三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48996984/

27 4 0
Đề xuất bài viết: html - 使用关键帧 css3 的无限循环 slider
Đề xuất bài viết: html - 当网格项跨越多列时进入单列布局
Đề xuất bài viết: html - 将鼠标悬停在窗口边缘内时显示 div
Đề xuất bài viết: javascript - 我希望文本按顺序出现
搜寻专家
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress