ฉันจะสร้าง“ เคล็ดลับเครื่องมือ” โดยใช้ CSS บริสุทธิ์ได้อย่างไร

ฉันเพิ่งเจอเคล็ดลับ CSS ที่เรียบร้อย ตรวจสอบซอ ...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

สิ่งนี้จะสร้างเอฟเฟกต์คล้ายลูกศร / สามเหลี่ยมเล็กน้อยซึ่งเป็น "หางคำแนะนำ" สิ่งนี้ทำให้ฉันนึกถึง! ฉันสนใจที่จะรู้ว่ามันทำงานอย่างไร!

นอกจากนี้ยังมีวิธีขยายเคล็ดลับ CSS นี้เพื่อสร้างเอฟเฟกต์ดังนี้:

นี่คือปัญหาที่น่าสนใจ. สามารถทำได้โดยใช้ CSS เพียงอย่างเดียวโดยไม่สนใจเงาในตอนนี้หรือไม่?

อัปเดต 1

ฉันคิดหาวิธีแก้ปัญหาสำหรับคำถามเริ่มต้นแล้ว นี่คือซอ ...

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

ตอนนี้ฉันจะเลียนแบบภาพเล็ก ๆ ด้านบนโดยใช้ CSS บริสุทธิ์ได้อย่างไรรวมถึงเงาและใช้งานข้ามเบราว์เซอร์ได้อย่างไร

อัปเดต 2

นี่คือวิธีแก้ปัญหาของฉันหลังจากการรวมกันของคำตอบด้านล่าง ฉันยังไม่ได้ทดสอบในเบราว์เซอร์หลายตัว แต่มันก็ดูดีใน Chrome

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

นี่คือตัวอย่างของบ็อกซ์แชโดว์เบราว์เซอร์เวอร์ชันล่าสุดทั้งหมดควรรองรับสิ่งนี้

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

นี่คือคำอธิบายเพื่อตอบคำถามแรกของคุณ (ฉันจะปล่อย CSS จริงให้คนอื่นฟังเพราะฉันขี้เกียจ - โปรดเพิ่มคะแนนคำตอบที่คุณคิดว่าสมควรได้รับการโหวต!):

สิ่งนี้จะสร้างเอฟเฟกต์คล้ายลูกศร / สามเหลี่ยมเล็กน้อยซึ่งเป็น "หางคำแนะนำ" สิ่งนี้ทำให้ฉันนึกถึง! ฉันสนใจที่จะรู้ว่ามันทำงานอย่างไร!

1. เมื่อแสดงเส้นขอบที่มีขอบสีต่างกัน แต่มีลักษณะเหมือนกัน (ในกรณีของคุณsolid) ตะเข็บที่แบ่งมุมที่อยู่ติดกันแต่ละคู่จะเป็นเส้นทแยงมุม มันค่อนข้างจะคล้ายกับสิ่งที่แผนภาพที่นี่แสดงให้เห็นของgroove, ridge, insetและoutsetรูปแบบที่ชายแดน

   โปรดทราบว่าในขณะที่เบราว์เซอร์ทั้งหมดทำงานในลักษณะเดียวกันและทำเช่นนั้นมานานเท่าที่ฉันจำได้พฤติกรรมนี้ไม่ได้กำหนดไว้อย่างสมบูรณ์ในข้อมูลจำเพาะ CSS2.1 หรือโมดูล CSS Backgrounds และ Borders ส่วนหลังมีส่วนอธิบายการเปลี่ยนสีและสไตล์ที่มุมและคำอธิบายดูเหมือนจะบอกเป็นนัยว่าสำหรับเส้นขอบที่มีรัศมีมุมเป็นศูนย์เส้นที่แสดงผลนั้นเป็นเส้นที่เชื่อมต่อกับมุมของขอบช่องว่างกับมุมของ ขอบขอบ (ส่งผลให้เส้นขอบทำมุม 45 องศาสำหรับเส้นขอบที่มีความกว้างเท่ากัน) แต่ข้อมูลจำเพาะยังคงเตือนว่าอาจไม่เป็นเช่นนั้นเสมอไป (โดยเฉพาะอย่างยิ่งเนื่องจากไม่ได้คำนึงถึงเส้นขอบที่มีรัศมีมุมเป็นศูนย์อย่างชัดเจน) ¹

2. โดยโมเดลกล่องเนื้อหา (W3C ดั้งเดิม)พื้นที่ 40x40 จะถูกสร้างขึ้นจากเส้นขอบ 20 พิกเซลโดยกำหนดขนาดเนื้อหาเป็น 0x0

3. การแบ่งสี่เหลี่ยมจัตุรัสที่มีเส้นทแยงมุมเชื่อมต่อกับมุมทั้งสี่ทำให้เกิดสามเหลี่ยมมุมฉากสี่รูปซึ่งมุมฉากจะบรรจบกันที่จุดกึ่งกลางของสี่เหลี่ยมจัตุรัส (ดูด้านล่าง)

4. เส้นขอบด้านบนด้านล่างและด้านซ้ายเป็นสีขาวเพื่อให้เข้ากับพื้นหลังของ.tooltiptailคอนเทนเนอร์ขององค์ประกอบในขณะที่เส้นขอบด้านขวาเป็นสีน้ำเงินเพื่อให้เข้ากับสีพื้นหลังของคำแนะนำเครื่องมือ:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;
   

ผลลัพธ์คือสิ่งนี้โดยมีป้ายกำกับและเพิ่มขอบเขตชายแดนโดยใช้ Line Tool ที่เชื่อถือได้

การปรับระดับคำแนะนำเครื่องมือใหม่เป็นเพียงเรื่องของการเปลี่ยนสีคำแนะนำเครื่องมือ ตัวอย่างเช่นสิ่งนี้จะให้หางที่ติดอยู่ที่ด้านล่างของปลาย:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

ตัวอย่าง jsFiddle

¹ _{หากคุณเป็นคนยึดติดกับการปฏิบัติตามมาตรฐานคุณอาจพิจารณาการแฮ็กทั้งหมดนี้ด้วย}

ฉันทำคำแนะนำเครื่องมือนี้ด้วยdivองค์ประกอบเดียวเท่านั้น

HTML:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS:

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

การสาธิต

คำอธิบาย:

ฉันมี div ปกติที่มีเส้นขอบเหมือนกับตัวอย่างอื่น ๆ หางเป็นการรวม CSS แบบง่ายๆ:

• ฉันใช้ pseudo selector: before (: after ก็ใช้ได้ดีเหมือนกัน)
• ฉันบังคับเนื้อหาด้วยช่องว่างสีขาวเพื่อให้มองเห็นหาง
• ฉันหมุนกล่องจาก 45deg เพื่อแก้ไขมุมที่ด้านข้างของคำแนะนำเครื่องมือ
• ไม่แปลกใจสำหรับขนาดและตำแหน่ง
• ฉันเพิ่มเส้นขอบบน 2 ด้านที่ฉันต้องการ
• และในที่สุดฉันก็เพิ่มเงาที่ขอบด้านนอก

เคล็ดลับไร้เงา

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

การสาธิตซอ

ด้วย Shadow (ดูแปลก ๆ ใน WebKit ... ต้องปรับให้เหมาะสมฉันเดา):

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

สาธิต 1 , สาธิต 2

แนวทาง Crossbrowser:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

อันนี้ใช้ได้จาก IE7 + (ทำงานใน IE6 โดยใช้ ( filter: chroma(color=white);) ด้วย แต่จะไม่แสดงขอบสีดำรอบลูกศร)

แก้ไข IE6:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

สิ่งนี้จะทำให้ความโปร่งใสสีดำน่าเกลียดที่ IE6 แสดงผลเป็นสีที่คุณระบุไว้ในตัวกรองโครม่า (ฉันเป็นสีขาวมันจึงหายไปในพื้นหลัง)

คุณสามารถทำได้ด้วยการหมุน CSS3 แต่จะล้มเหลวในเบราว์เซอร์ที่ไม่รองรับ CSS3:

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

คุณสามารถใช้ประโยชน์จาก: before and: after pseudo-elements ของ CSS อินสแตนซ์ FOr: before สามารถใช้เพื่อแทรกสามเหลี่ยมและ: after เพื่อแทรกสี่เหลี่ยมผืนผ้า การรวมกันของสองสิ่งนี้ทำให้เกิดปลายเครื่องมือฟอง

เช่น :

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

สามารถดูเครื่องมือออนไลน์ได้ที่http://www.careerbless.com/services/css/csstooltipcreator.php