Hướng dẫn rectangle with arrow css - hình chữ nhật có mũi tên css

Question

0

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Làm cách nào để thực hiện mũi tên này bằng CSS?

Tôi không thể loại bỏ đường viền của phía thứ ba của tam giác

Đây là những gì tôi có cho đến nay:

    #arrowbox
    {
     width: 200px;
     height: 50px;
     background-color:white;
     margin-left:100px;
     margin-top:100px;
     position: relative;
     border-style:solid;
    }

    #arrowbox:after {
    	left: 100%;
     	top: 20%;

     	content: " ";
    	height: 0;
	    width: 0;
	    position: absolute;
	    border-style:solid;
	    border-color: rgba(0, 128, 0, 0);
	    border-left-color: black;
	    border-width: 40px;
	    margin-top: -25px;
    }

Hướng dẫn rectangle with arrow css - hình chữ nhật có mũi tên css

G-Cyrillus

97.1K13 Huy hiệu vàng97 Huy hiệu bạc120 Huy hiệu đồng13 gold badges97 silver badges120 bronze badges

Khi được hỏi ngày 26 tháng 5 năm 2018 lúc 17:36May 26, 2018 at 17:36

1

Bạn có thể thử một cái gì đó như thế này bằng cách sử dụng phần tử giả và gradient:

.arrow {
  width:300px;
  height:100px;
  margin:50px;
  border:1px solid #000;
  border-right:none;
  position:relative;
}
.arrow:before {
  content:"";
  position:absolute;
  right:-50px;
  width:100px;
  height:100px;
  border-top:1px solid #000;
  border-right:1px solid #000;
  transform: rotate(45deg);
}
.arrow:after {
  content:"";
  position:absolute; 
  right:0;
  top:-20px;
  bottom:-20px;
  width:1px;
  background:
   linear-gradient(#000,#000)top/100% 20px no-repeat,
   linear-gradient(#000,#000)bottom/100% 20px no-repeat;
}

Bạn cũng có thể sử dụng phần tử đa giác của SVG để dễ dàng tạo nó:

svg polygon {
 stroke:#000;
 fill:transparent;
}

Đã trả lời ngày 26 tháng 5 năm 2018 lúc 18:10May 26, 2018 at 18:10

Temani Afiftemani AfifTemani Afif

224K19 Huy hiệu vàng260 Huy hiệu bạc364 Huy hiệu đồng19 gold badges260 silver badges364 bronze badges

Bạn có thể tận dụng thuộc tính

1, tuy nhiên, nó không được hỗ trợ rộng rãi vào thời điểm này: https://developer.mozilla.org/en-us/docs/web/css/clip-path

#arrowbox {
  width: 100px; height: 100px;
  background: pink;
  -webkit-clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
  clip-path: polygon(0% 35%, 75% 35%, 75% 25%, 99% 50%, 75% 75%, 75% 65%, 0% 65%);
}

Đối với những người đang tìm kiếm một tùy chọn SVG, điều này sẽ cung cấp cho bạn sự sang trọng của việc lấp đầy nó với một màu nếu bạn muốn, hoặc thêm các thuộc tính kiểu dáng khác khi cần thiết:

svg { width: 150px; height: 150px; }

Đã trả lời ngày 26 tháng 5 năm 2018 lúc 18:20May 26, 2018 at 18:20

Soulshinedsoulshinedsoulshined

8.7925 huy hiệu vàng38 Huy hiệu bạc75 Huy hiệu đồng5 gold badges38 silver badges75 bronze badges

Chủ đề này có 9 câu trả lời, 4 giọng nói và được cập nhật lần cuối 5 năm, 5 tháng trước bởi Mastercna.MasterCna.

Tác giả

Bài viết
- Bạn phải đăng nhập để trả lời chủ đề này. #51519
  Chủ đề này có 9 câu trả lời, 4 giọng nói và được cập nhật lần cuối 5 năm, 5 tháng trước bởi Mastercna.
  I need a rectangle just like this:
  
  Also i viewed “Sciter-SDK\samples\tooltips++” but it’s not close to what i want to be.
  I used an image for this instead of CSS but it does not currently work with the image. (Buttons with “display: block” style set on TOP of image).
  Any solution for designing in CSS?
  - Ngày 29 tháng 5 năm 2017 lúc 11:18 AM #51519MasterCna.
- Xin chào, tôi cần một hình chữ nhật giống như thế này: Ngoài ra tôi đã xem SCITER-SDK \ Samples \ Tooltips ++, nhưng nó không gần với những gì tôi muốn. Tôi đã sử dụng một hình ảnh cho việc này thay vì CSS nhưng hiện tại nó không hoạt động với hình ảnh. . Bất kỳ giải pháp để thiết kế trong CSS? #51522
  Chủ đề này đã được sửa đổi 5 năm, 5 tháng trước bởi Mastercna.
  Why?
  - Ngày 29 tháng 5 năm 2017 lúc 12:20 tối #51522 #51523
    Lý do là: hình ảnh mũi tên được bao phủ bởi nút và ẩn đó. Đây là nút CSS của tôi:
    
    The arrow image covered by button and hide that.
    this is my button CSS:
    0
    Tôi nghĩ rằng ‘Hiển thị thuộc tính trên mạng làm cho vấn đề đó, trước khi thêm thuộc tính‘ Display và Flow, mọi thứ đều ổn. Tôi sử dụng ‘Hiển thị và Flow, chỉ để loại bỏ không gian trắng giữa các nút.
- Ngày 29 tháng 5 năm 2017 lúc 1:20 PM #51524 #51524
  Mục đích của
  2 ở đó là gì? Đánh dấu của bạn trông như thế nào?
  3 là một quy tắc cho yếu tố nào?
  3 is a rule for what element?
  Hay bạn muốn chúng tôi chỉ để đoán ý của bạn?
  - Ngày 29 tháng 5 năm 2017 lúc 2:50 chiều #51525 #51525
    Nổi sang trái để loại bỏ không gian trắng bên trái thực sự. #SmartScan là ID nút của tôi trong tệp HTML
    4 Tôi chỉ cần thêm các thuộc tính CSS cho các phần tử được chỉ định theo cách này.
    The #SmartScan is my button id in html
    File
    4
    I just add css attributes for specified elements with this way.
    - Ngày 29 tháng 5 năm 2017 lúc 3:10 chiều #51526 #51526
      Thực sự trôi nổi bên trái để loại bỏ không gian trắng bên trái
      
      Ồ vậy ư? Không gian trắng đó ở đâu?
    - Ngày 30 tháng 5 năm 2017 lúc 1:09 AM #51534 #51534
      Tôi không biết bất kỳ thuộc tính hoặc quy tắc CSS nào tôi chỉ làm việc với C ++ và chỉ theo hướng dẫn của W3Schooles CSS. Dưới đây là các nút của tôi mà không có
      5 và mũi tên hiển thị hoàn hảo.
      Here are my buttons without
      5 and arrow show perfectly.
      
      Và sử dụng trang này để loại bỏ khoảng trắng giữa các nút: https://stackoverflow.com/questions/17365017/how-to-delete-extra-pace-between
      https://stackoverflow.com/questions/17365017/how-to-delete-extra-space-between-buttons
      - Câu trả lời này đã được sửa đổi 5 năm, 5 tháng trước bởi Mastercna.MasterCna.
    - Ngày 30 tháng 5 năm 2017 lúc 2:14 AM #51539 #51539
      Tôi không biết bất kỳ thuộc tính CSS nào
      Đó có lẽ là một điều tốt, bởi vì một số thứ hoạt động khác nhau trong Sciter. Bạn thực sự nên theo dõi DOC/Mẫu từ SICTER SDK thay vì hướng dẫn cho trình duyệt.
      You really should follow doc/samples from Sicter SDK instead of guides for browsers.
- Ngày 30 tháng 5 năm 2017 lúc 2:01 AM #51536 #51536
  Cố gắng sử dụng dòng chảy của dòng chảy: ngang; Các thuộc tính trong trình bao bọc của các nút (và các nút có lề: 0;
  .
  )
  - Ngày 30 tháng 5 năm 2017 lúc 3:58 AM #51540 #51540
    Cảm ơn bạn rất nhiều, hoạt động tốt. chúc may mắn
    good luck
Tác giả
Bài viết

Bạn phải đăng nhập để trả lời chủ đề này.

programming css Cross shape CSS CSS shapes CSS arrow border Border-radius shapes CSS arrow box

Hướng dẫn rectangle with arrow css - hình chữ nhật có mũi tên css

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội